David’s Web Development Blog

If you’ve done any sort of work with rounded corners on webpages, you know that they can be tricky to pull off.  In any case, it’s a lot harder than it really should be.  Working with rounded corners is almost like adding graphical borders around elements as if the CSS border property didn’t exist.  It’s a lot of effort for something seemingly so minor.

While it may not be completely representative of the majority of web developers, I have been noticing a subtle shift away from rounded corners.  For instance, late last year, Google Reader eliminated its rounded corners (along with a few other “Web 2.0″ trends like drop shadows).

Firefox rounded corners

Something similar was my discovery that the very popular Twitter actually only displays rounded corners in Firefox.  Why only Firefox?  Thanks to the Firefox proprietary spiffy and quick proper -moz-border-radius CSS property:

//make all four corners round in Firefox
-moz-border-radius: 4px;

And of course it’s always nice to have fine-grained control of each separate corner:

//make specific four corners round in Firefox
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;

But note that viewing in IE or Safari will be the conventional square corners.  But it doesn’t look bad, really.  In this case the rounded corners can be considered progressive enhancement for users with Firefox.

Webkit rounded corners

Within the past few months I also discovered a proprietary “border radius” property in Webkit browsers (Safari and Chrome): -webkit-border-radius, which works the same way as the Firefox border:

//make all four corners round in Webkit
-webkit-border-radius: 4px;

And the more refined control:

//make specific four corners round in Webkit
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;

So if you want a painless way of pulling off rounded corners, you can now achieve that with pure CSS for browsers such as Firefox, Safari, and Chrome!

However, all together, these represent the minority of web browsers.  If you want your precious rounded corners in IE as well, then you’ve got to go back literally to the chopping block to slice and dice some images.

Javascript rounded corners

OR you could even try newer methods, which use Javascript (specifically jQuery) to painlessly implement the rounded corners.  Then you can go back and work on the stuff that really matters…