<

Rounded Corner Effect in CSS

Posted on
6,171 Points
71 Views
1 Endorsement
Last Modified:
Published
Experience Level: Beginner
3:29
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property

Video Steps

1. Begin with a normal styled element such as a div

2. To style all four corners of the div to be the same degree of roundness, use the "border-radius:" property and type a pixel value. The larger the number, the rounder the corner will be. A value of 0px will lead to a 90-degree angled corner

3. To style all four corners to have different degrees of roundness, type four different pixel values

4. The four different pixel values will style the corners clockwise starting from the top left. The first value will style the top left corner, the second value will style the top right corner, the third value will style the bottom right corner, and the fourth value will style the bottom left corner

5. For maximum compatibility, copy your border-radius property three more times, each time with a different compatibility prefix. You should end up with border-radius, -moz-border-radius, -webkit-border-radius, and -o-border-radius

1
0 Comments

Suggested Videos

Title Views Activity
Creating Gradients in CSS 60
CSS Positioning - Relative vs Absolute vs Fixed 316
Custom List Bullets in CSS 246
Flexible Layouts 74
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month