Rounded corners

The first CSS3 effect that we'll look at is rounded corners, since that was such a sought-after feature before CSS3. In the past, if you wanted rounded corners, there were only a few non-optimal solutions available. You could load four images, one for each corner, and add some extra markup to get them to line up (and try to make it work in all browsers). Or implement some kind of hack using multiple div tags to "draw" a rounded border. Or one of a half a dozen other ways. In the end none of them were great solutions. So why did we go to such lengths to make rounded corners work before CSS3? Because people are attracted to them and they just seem to make your design look more natural.

Rounded corners are ridiculously easy to add to elements using CSS3's new border-radius property. If you want each corner to have the same border radius, just give it one value, like this:

border-radius: 0.5em;

If you want to set each corner of the border to a different radius, you can do that too. The values are in the standard order for CSS properties, clockwise from the top-left: top-left, top-right, bottom-right, and bottom-left.

border-radius: 1px 4px 8px 12px;

You may set one, two, three, or all four values. One and four are self-explanatory.

You can also define each corner's radius separately, as shown here:

border-top-left-radius: 1px;
border-top-right-radius: 4px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 12px;