Border Radius Explained
The CSS3 border-radius property allows you to apply rounded corners to HTML elements without the need to use images or other hacks.
The syntax is fairly straightforward. The following rule will set the radius of all four corners of an element with id "myDiv" to 5px:
We can specify the radius of each corner individually like this:
This causes the radius of the top left corner to be set to 5px, the top right corner to be set to 10px, the bottom right to 20px and the bottom left corner to 15px.
This is not the end of the story though. At the time of writing only the latest versions of the most popular browsers support the border-radius property. However previous versions of Mozilla and Webkit browsers supported the property via their own vendor prefixed rules. Firefox 3 supported border radius rules via their "-moz-" prefix, while webkit browsers such as Safari and Chrome use the "-webkit-" prefix.
A large percentage of users still use these browsers, so to achieve rounded corners in as many browsers as possible, you should use the following syntax:
The order of these rules is important. We define the webkit and Mozilla rules first and then the border-radius rule. This is so that when this property finally becomes standardised, supporting browsers will use the final rule in this set and ignore the previous rules.
This may seem like it is cluttering up your code unnecessarily but the benefit is worth it. When you compare it to other methods which require the browser to download large background images you can appreciate the elegance of this solution.
If you use the CSS3 generator above you will notice slight variations in the way the rules work for different browsers. For example Mozilla requires the bottom right corner to be defined like this:
Whereas for webkit browsers it needs to be defined like this:
These variations are hard to remember, which is why CSS3Gen is such a useful tool.
At the time of writing the following browsers support the CSS3 border-radius property:
|W3C Specification||Vendor Prefix|