CSS3 rounded corners

CSS3 support for rounded corners is not news, what I haven’t realized yet, was that some browsers support rounded corners natively (in fact, the support has been added long time ago).

According to the CSS3 spec, it should be enough to use the style “border-radius” to set the rounding, unfortunatelly, browsers do not support this style yet 🙁

On the other hand, a div with rounded corners could be easily specified for gecko and webkit, just by using “-moz-border-radius” for Firefox 2/3, and “-webkit-border-radius” for the latest (Safari).

After trying this on some browsers I’ve seen that Firefox 2, Firefox 3, Safari 3.1 and Chrome work as expected, while Opera and Internet Explorer (IE6/IE7) have no support for this (natively).

This block of text should appear inside a rounded corner box on Firefox, Safari or Chrome.
If you look at page contents, I haven’t used any javascript or any complex CSS, just:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

What I don’t like, is the fact that I haven’t found any way or non-standard attribute for doing this on IE.
Well, what do you think about the rounded corners?

Trackback URL

, , , , , , ,

Comments are closed.