Rounding Border Corners with CSS3
Rounded corners can help soften an otherwise sharp design, but the have been difficult to achieve using images. CSS3 includes a simple method for rounding off one or all of the corners of an elements box: border-radius
Both Mozilla and Webkit have implemented their own versions of border-radius in advance of the final W3C pronouncement, and you need to take these browser extensions into account for the widest interoperability.
To set rounded corners
- Add the Webkit, Mozilla, and standard CSS3 border-radius properties
- Type a border-radius value, followed by a semicolon, using the same value for all three instances
Each corner's border radius can be set independently without specifying the other corner radii.
This technique is compatably with
Firefox 1 +
Safari 3 +
Crome 1 +
Source: CSS3 visual quickstart guidecomments powered by Disqus