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.
I'm the founder of PeepNote.com, the Sr Rails Developer for MileyWorld.com and WOMbeat.com, a digital nomad, father, movie & ice tea connoisseur, avid reader & writer, and a black belt. Read my full bio »
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.
4 Responses to CSS3: Rounded corners and shadows
Steven Pothoven
January 30th, 2006 at 9:36 pm
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
April 7th, 2006 at 6:08 pm
Yes and isn’t it a shame that not everyone uses Firefox. That would make development and design so much easier.
Steven Pothoven
April 19th, 2006 at 12:33 pm
Or you could use Rico’s rounded corner functions
Bill Lipa
September 18th, 2008 at 2:10 am
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/