Make Rounded Corners with CSS 3 - dummies

Make Rounded Corners with CSS 3

If you created a box with rounded corners using previous versions of CSS, images, and HTML tables, you know what a pain it was — how you had to create four images (one for each corner), and how you had to carefully adjust everything so that the corners lined up just so.

Whether or not you tried the old technique, you’re sure to appreciate how much easier creating rounded corners is when you use the CSS 3 property border-radius.

When you use border-radius, you specify the length of the radius as the value to create the rounded corners. You can then make your rounded corners as rounded as you like, and you can apply the style to any or all of the corners of a box. Here you see a diagram designed to help you see how changing the radius changes the curved corner.


You can apply border-radius to any box object, such as a <div> tag or an <h1> tag. Here’s the syntax for creating rounded corners in CSS 3 for WebKit browsers (note that r represents radius, the distance from the center of a circle to the curved corner):

-webkit-border-radius: r length;

If you want to specify a different radius for each corner, your style might look more like the following bit of code. In this figure, you see how the values change if the rounded corner is only applied to the upper right and lower left corners:


-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 25px;

You can have even more control over the radius if you specify two values for the radius, like this:

-webkit-border-radius: 50px 100px;

In the next example shown, one font height of rounding was added to the box so that it remains in scale with the text. By using the em unit as our unit of measure, we can keep the design in scale on both the iPhone and iPad. This is a helpful practice when you want to add rounded corners around a text element, such as a headline:


-webkit-border-radius: 1em;

In the example a drop shadow and a gradient was also used. You can add drop shadows using CSS 3.