Friday 4 March 2011

CSS: Border radius with CSS3

   


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.

0 thoughts:

Post a Comment

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.