Rounded Corners for All (Except IE)

Published August 6, 2009

Getting quick and easy control of rounded corners is a bit of a holy grail for theme developers and CSS jockeys. In order to do rounded corners correctly and have them appear consistent across a wide range of browsers often entails several additional HTML elements (usually DIVs) and several hours of CSS head-banging.

An easy way to get around this, providing you're willing to give up rounded corners in IE (a big "if", I know) is to utilize a couple of browser-specific CSS properties. Both Firefox and Safari utilize the "border-radius" CSS properties. For example:


-moz-border-radius: 8px;
-webkit-border-radius: 8px;

As of now, no versions of IE support the border-radius property (not even IE8 - crazy, I know), but since the property will likely be part of a future CSS standard, we have to believe that the next version of IE will support it.

So, if you don't mind not having rounded corners in IE, then this is a good, quick way to gain rounded corners for a portion of your users.

Add new comment

The content of this field is kept private and will not be shown publicly.

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!

Name
CAPTCHA