CSS3: Rounded corners and shadows

Subscribe to the site

Brian is a software developer with over 21 years experience in creating and managing Internet-based software services. He is currently managing development for the online media company, Family First.Read full bio »

CSS3: Rounded corners and shadowsJanuary 30, 2006

Be the 1st to comment!

These CSS3 tips will certainly come in handy and will thankfully eliminate all those corner gif’s that I see so many websites using to get this effect.

Steven Pothoven

With Mozilla based browsers (including Firefox), you can add rounded corners with the CSS tag: -moz-border-radius: 8px; (where the radius can be adjusted to suite your preferences.
Of course, that doesn’t work in IE.

I use that for my code samples on my blog (http://blog.pothoven.net)
Brian Burridge

Yes and isn’t it a shame that not everyone uses Firefox. That would make development and design so much easier.
Steven Pothoven

Or you could use Rico’s rounded corner functions
Bill Lipa

Here’s an article that explains how to use the CSS border-radius property to create rounded corners without images in Safari and Firefox, while showing alternate CSS to IE that uses corner images.

http://www.bestinclass.com/blog/2008/simple-rounded-corners-with-css3-box-radius-and-fallback-for-ie/