CSS: Border radius with CSS3

Tweet

I continue exploring new properties that will be introduced with CSS3. This time I like to share information on the border radius property, which is really a great thing, considering that most of us probably had to create such effect for a new web site or application more than once. Personally I like rounded corners, even if - I must admit - recently I've started to prefer live corners again. That is probably related to fashion or personal taste and aesthetic; however, from a technical point of view, you know how tricky is/was to create such round corners effect. At the beginning we used a set of small gif images - and that was a real mess - then came jQuery or JavaScript in general.
And what about now? CSS3!

The style

With CSS3 and the border radius property, rendering a round corner is very easy. In the following example, we are  going to make round corners for every span tag in the page:

<style type="text/css">
span
{
border:2px solid #000000;
padding:5px 10px;
background:#FF0000;
width:200px;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
text-align:center;
color: #FFFFFF;
}
</style>

Border-radius
Considering that most of the above style should be quite common (and you should know already what it does), we concentrate on the border-radius property. This is the syntax:

border-radius: 1-4 lengths|% / 1-4 lengths|%;

where lenghts defines the shape of the corners.
Note: The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Compatibility

And now the bad news. As you may already know, CSS3 is not a standard yet. So here we have some problems. First of all, IE is not compatible with the border-radius property. It is supported by Opera, Safari and Chrome. Firefox supports an alternative, the -moz-border-radius property.
Hopefully with the new IE version that is going to change.