Most new browsers now support the rounded borders CSS3 attribute.
However, during the drafting period, it was all done differently. To properly support these browsers, you'll need some extra styling rules to make it work.
The way I do it is less compatible but uses no hacks such as external .HTC files or browser specific CSS files because I dislike these solutions.
The rounded borders should be supported natively (with prefixes) from Firefox 1.0, Internet Explorer 9, Opera 10.5 and Chrome/Safari 3.
The magic
I like to separate my proper classes from the "compatibility" tweaks. The tweaks I normally put at the end of the file but with a matching selector name.
.tooltip {
border-radius: 3px;
}
.tooltip {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
} As you can see, the later ".tooltip" definition adds prefixes for Mozilla, Webkit (Chrome/Safari) and Konquerer.
div.box {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
div.box {
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-top-left-radius: 5px;
} Just a little something to watch out for, the earlier versions of Mozilla has their syntax as "radius-topright" rather than "top-right-radius" like the other browsers do.
Also, if rounded borders aren't working on IE9, please see this post regarding the X-UA-Compatible tag.
