CSS-Based Rounded Corners Now

CSS3 is on the way and support is coming at a more rapid pace these days. Safar/WebKit/Konqueror/KHTML and Mozilla/Firefox are pushing the envelope big time.

IE7 probably doesn’t support it. Why would you expect that? And I can’t and don’t want to test IE anything anymore.

So without more ado, here’s the beef:

border-radius: length
Will be the CSS3 property. You can also use:

• border-radius-topright
• border-radius-topleft
• border-radius-bottomright
• border-radius-bottomleft

Of course none of these will work. So for now you need to prefix your property with either -webkit- or -moz-
This will make it work in Safari/WebKit browsers and Mozilla/Firefox browsers respectively.
This can mean double the code and definitely means no validation. But sometimes, who cares about validation? The beauty of CSS is that if a user-agent (browser) doesn’t understand something, it will ignore it. This is part of the CSS standard and it is supported widely.

On a further note, for those styling forms in Safari/WebKit browsers, checkout the WebKit.org site for tips on how to style forms for these browsers. Forms are defined to be drawn (more or less) by UI widgets in the OS. That’s why the frustrations of widely varying form widget rendering exist. It is also why Mozilla/Firefox created their own UI widgets to bypass the OS and provide a consistent interface across platforms.

**EDIT**
After testing the -moz-border-radius property in Firefox 2 on OS X (PPC), it is apparent that this feature is still a little rough around the edges like a few other border properties in Firefox (the alternately in-out 1px on resizing windows with fluid layouts).
The rounded corner rendered with a blank spot about 1px wide in the center of the top right corner’s radius. Go figure…