CSS3: Rounded corners and shadows

Subscribe to the site

Brian is an entrepreneur developer with over 16 years experience in developing Internet-based software. He is a Partner and Sr. Technologist at Gauged2 and has founded several web sites including Commendable Kids, PeepNote and We Are Tampa Bay.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.

http://blog.pothoven.net 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)
http://www.hirebrianburridge.com Brian Burridge

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

Or you could use Rico’s rounded corner functions
http://www.bestinclass.com 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/