Rounded corners are a common element of web designs. Unfortunately, they have been frustratingly difficult to express in clean CSS / HTML. The long term solution is CSS3’s border-radius property, which is nicely supported in the current versions of Safari and Firefox. Sadly but unsurprisingly, this property is not supported in IE, even the upcoming IE8.
The new design for our website was full of rounded corners. As an avid Firefox user, I simply could not bear the idea of sending millions of little corner images when border-radius did the trick so well. Yet, IE7 is the dominant browser, so we couldn’t leave those users out in the cold.
I started looking for a technique that would meet these requirements:
- CSS3 border-radius aware browsers are sent clean, fast CSS with no corner images
- IE7+ gets a fallback using corner images
- The same HTML is used for all browsers – only the CSS is different
- Cosmetics in IE6 don’t matter – it’s OK to have square corners in this old browser
- No Javascript
Fortunately, I did find a flexible way to achieve this without too many problems. If you look at the BestInClass.com home page in Firefox, all of the corners and rounded buttons are implemented with pure CSS3.