Rounded corners can help soften an otherwise sharp design, but they have been difficult to achieve using images. CSS3 includes a simple method for rounding off one or all of the corners of an element’s 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:
1. Add the Webkit, Mozilla, and standard CSS3 border-radius properties. -webkit-border-radius: -moz-border-radius: border-radius: Although the order doesn’t matter, it’s generally preferred to have the CSS3 version last because it’s the version that should be used.
2. Type a border-radius value, followed by a semicolon, using the same value for all three instances. 5px; This value can be one of the following depending on browser compatibility. A length value, which sets the radius of an imaginary circle at the corner, which is used to round it off. The larger the value, the rounder the edge. A percentage (0% to 50%), which uses the size of the element to set the corner radius. Higher values produce rounder corners, with 50% joining corners into a semicircle. Percentage is not supported in Webkit.
3. Each corner’s border radius can be set independently without specifying the other corner radii. -webkit-border-top-right-radius: ➝ 20px; -moz-border-radius-topright: ➝ 20px; border-top-right-radius: 20px; Mozilla has a slightly different syntax from Webkit and W3C (used by Opera), but the equivalents.
4. For -moz and standard CSS3 instances (but not -webkit), you can include up to four values. -webkit-border-top-left-radius: ➝ 20px; -webkit-border-bottom-left- ➝ radius: 20px; -moz-border-radius: 20px ➝ 0 0 20px; border-radius: 20px 0 0 20px; Separate each value by a space as a shortcut for setting the border radius: One value sets all four-corner radii the same.
Two values set the radius for the topleft/ bottom-right and bottom-left/topright corners. Three values set the corner radius for the top left, bottom left/top right (the same), and the bottom right corners. Four values set the radius for each corner in this order: top left, top right, bottom right, and bottom left. With Webkit you must set corners separately because it treats a second value as the second point in the radius to create elliptical (rather than circular) corners.