Imageless Rounded Corners

Over the past few years, many web designers have decided rounded-corners improve the layout/usability of their sites. Typically, two techniques are used: using background images with layered elements or simulating rounded corners with elements inserted via JavaScript. Both techniques have a drawback, requiring extra load time for images to download or for JavaScript to execute. It would be nice if browsers had built in CSS support handling the rounding of corners. Fortunately, CSS3 will include a "border-radius" rule to specify how to handle corner rounding. Although no browsers fully support CSS3 yet, there are browser specific rules implementing the CSS3 rounded corners.

Please note however, this technique does not work in IE (not even 8), and it is not yet supported by Opera (latest version is 9.64), although it should be supported soon. I recommend gracefully degrading (no rounded corners) in these browsers, as site performance is paramount to maintaining users and todays technique is much faster and more versatile than other methods. However, if rounded corners are a must in IE, then I suggest reading, Rounded Corners in Internet Explorer, and implementing an IE version using SVG or PNG.

That said, in CSS3 developers will be able to use the following rounded corners rules:

Example 1: CSS3 Rounded Corners Rule

border: 1px solid #F00;
border-radius: 5px;
/** specify horizontal  and vertical radii */
border-radius: 5px 10px;
/** below target a specific corner */
border-top-left-radius: 5px 10px;
border-top-right-radius: 5px 10px;
border-bottom-left-radius: 5px 10px;
border-bottom-right-radius: 5px 10px;

First, with all the rounded corner rules discussed today, the border rule is optional. If the developer does not specify a border, the element will still be rounded but with an invisible border. When the border is specified then then a line of the provided color and style will surround the element and round as well.

The border radius can be defined in two different ways: a single value indicates that the corner(s) should be rounded evenly, while two values indicates that the corner(s) will be rounded with the first value being the horizontal distance and the second value the vertical from the center of the curve. A developer may also target a specific corner by using "border-top/bottom-left/right-radius" instead of "border-radius". For more information on the border radius, see the W3C specification.

That said, "border-radius" does not work as defined in any of the major browsers. Instead you will need to use browser specific versions:

Example 2: Browser Specific Border Radius Rules

border: 1px solid #F00;
/** web-kit (safari/chrome) */
-webkit-border-radius: 5px;
-webkit-border-radius: 5px 10px;
-webkit-border-top-left-radius: 5px 10px;
-webkit-border-top-right-radius: 5px 10px;
-webkit-border-bottom-left-radius: 5px 10px;
-webkit-border-bottom-right-radius: 5px 10px;
/** konquerer */
-khtml-border-radius: 5px;
-khtml-border-radius: 5px 10px;
-khtml-border-top-left-radius: 5px 10px;
-khtml-border-top-right-radius: 5px 10px;
-khtml-border-bottom-left-radius: 5px 10px;
-khtml-border-bottom-right-radius: 5px 10px;
/** possibly opera */
-opera-border-radius: 5px;
-opera-border-radius: 5px 10px;
-opera-border-top-left-radius: 5px 10px;
-opera-border-top-right-radius: 5px 10px;
-opera-border-bottom-left-radius: 5px 10px;
-opera-border-bottom-right-radius: 5px 10px;
/** gecko (firefox/) */
-moz-border-radius: 5px;
-moz-border-radius: 5px 10px;  /* !IMPORTANT! rule doesnt work */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;

For the most part the browsers have chosen to append their identifier to the front of "border-radius" and mirror the W3C specifications. Mozilla chose not to do this, changing the way developers target corners (topleft, instead of top-left) and not supporting the use of two parameters for a rule; all corners must be uniformly rounded in Mozilla. I recommend rounding corners uniformly in all browsers, anyway, because they look better.

I have written a Demo Page to show how to use these rules. The outer element has the upper left corner rounded to "10px 20px" (notice that the rule is not applied in FireFox) and the bottom right corner rounded to "10px"; no border style is specified. The inner element has all corners rounded uniformly to "10px" and a dashed, red border.