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.

More Quicktips

• ‹ Keep Local Database and Filesy…
• 49 of 103
• Using Context Module to Set Bo… ›