George Adams Blog - Rounded Corners with CSS3

15 January 2010, 17:48

Rounded Corners with CSS3
If you're using a newer, compliant browser then you may have noticed that I have rounded corners to frame my content, as well as shape my links and tags. If the corners aren't rounded, then upgrade The softened corners break the monotony of the old square web pages. The rounded corners part of the CSS3 spec is not finished, but it's looking good now, and I hope the CSS Working Group (CSSWG) leaves it the way it is.

Back in 2007, Safari 3 and Mozilla Firefox implemented the border-radius property very differently--as differently as one could reasonably do it. However, building on the comments in this article, the spec evolved to be both cleaner (derived from the Gecko implementation) and still as powerful as the original (implemented by Webkit). That article made me very happy, because the end result showed me that the CSSWG was listening. But anyway, who cares about history, how do you make rounded corners? Are there limitations?

There are a few ways to achieve rounded corners with CSS, as with many other CSS properties. I think it's easiest to start with an example.
```
border-radius: 4em;

is equivalent to

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

and

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;
```
The border-radius property is a shorthand for border-*-radius. That's a pretty simple idea that any CSS author should know, so I won't put any time into it. The interesting part is to what the values can be set. There are two radii for each corner, a horizontal radius and a vertical radius. Having two radii gives you more flexibility in that you can make a corner follow an ellipse, rather than a perfect circle. To set both horizontal and vertical radius values, you need to split them with a /. The value before the / is the horizontal radius and the value after is the vertical radius. However, you do not always need the / to separate the two values. If you spell out each corner line-by-line, as shown above, then a simple space will delimit the two values.

You will need to prefix the above properties with -moz- and -webkit- to run on Mozilla-based and Webkit-based browsers, respectively, since both are still experimental. I'd also put what's above to get a little future-proofing. When the declaration discards its experimental badge, it'll still work. Remember, declarations that are not recognized are just dropped, so you have nothing to worry about.

There are weaknesses in the implementation, though. In Webkit-based browsers, like Chrome and Safari, the background of the bordered element will show through&emdash;however slightly&emdashon the outside of the rounded corner. On MacOSX, I have noticed that same problem, even with Gecko. When running Firefox on Windows and Ubuntu, everything looks fine. So I guess I should say that I only officially support Firefox 3.5+.
—geowa4

George Adams IV

Software Engineer

15 January 2010, 17:48

Rounded Corners with CSS3