W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. Most of the people doesn’t know about this CSS feature and so I am sharing it here for you.
The two length values of the ‘border-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner (see the diagram below). The first value is the horizontal radius (or vertical if the ‘writing-mode’ is vertical). If the second length is omitted it is equal to the first (and the corner is thus a quarter circle). If either length is zero, the corner is square, not rounded. The border radius also causes the element’s background to be rounded, even if the border is ‘none’. Negative values are not allowed.
The code for this example above is actually quite simple. Have a look at it given below.
All the four different corners can also be handled by their own, Mozilla has other names for the feature than the W3C specifications says, like -moz-border-radius-topright as opposed to -webkit-border-top-right-radius
-moz-border-radius-topright OR -webkit-border-top-right-radius
-moz-border-radius-bottomleft OR -webkit-border-bottom-left-radius
-moz-border-radius-bottomright OR -webkit-border-bottom-right-radius
Unfortunately it seems that this CSS feature doesn’t works with IE 6 & 7. Hope this works with the new version of IE.
Hope you enjoyed this post. What do you think about this method of creating rounded corners? If you have any better ideas about creating a drop shadow suing CSS please let us know. Comments, feed backs and critics are most welcome.
No comments yet.