And what about now? CSS3!
The styleWith 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:
border:2px solid #000000;
-moz-border-radius:25px; /* Firefox */
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:
where lenghts defines the shape of the corners.
border-radius: 1-4 lengths|% / 1-4 lengths|%;
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.
CompatibilityAnd 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.