Rounded Corners With CSS
Posted by Josh Wright | Posted in Code | Posted on June 1, 2010
Jun 1
The Old Way
Apparently I’ve been doing rounded corners like a three-year-old from 1993. Lots of html, images, javascript, and probably a whole library was involved, reminding you of something like this:
Terrible Rounded Corners
This was all graciously brought to my attention by my css guru coworker @okcscott.
The Right Way
Ladies and gentlemen, I present to you…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style type="text/css"> .Rounded { -moz-border-radius:10px 10px 10px 10px; // rounds corners for firefox border-radius:10px 10px 10px 10px; //rounds corners for other browsers border:solid 1px #000; background-color:#acf; padding:10px; } </style> <span class="Rounded"> This span has rounded corners! </span> |
Looks like this:
This span has rounded corners!
Off course this doesn’t work in all browsers… just the good ones, so maybe all those libraries aren’t obsolete. But I hope they will be someday.
Just FYI, border-radius:10px will make rounded corners in all the other browsers, even IE9. You only need -moz for mozilla, those goobs. But way way way better than all the extra junk that used to have to be done.
Thanks Scott, I updated the post.
Mozilla is goobish – I wonder why they don’t just follow the standard. Maybe they’ve been drinking some of the IE koolaid.
It’s because during development of a standard, the right thing to do is to use a custom css property, all of which start with a prefix like -opera -webkit -moz, etc.
Until those CSS3 properties are out of working draft, it is the WRONG thing to do to use the eventual property name. If you look at how all browsers do rounded corners, it’s slightly different (particularly with eased corners, etc).
If everyone took IE’s lead and started using a css3 style property directly, then the standard was completed differently to how todays browsers rendered it, styling right across the web would break.
Hope that helps