After taking a peek beneath the covers of the beautiful WordPress 2.7 admin interface and reading John Allsopp’s Shiny Happy Buttons article on 24ways.org, it’s become abundantly clear that the next great web design era isn’t going to wait around for Internet Explorer. The future is going to be a bit more rounded and IE will be, well, square.
Why can’t we just ask the browser to provide a 5px radius in CSS in whatever color/width/shape we want and get on with our day? We can.
Welcome Border Radius
Firefox has supported a border radius property for some time now (
-moz-border-radius) and Safari recently came out with their own experimental syntax (
-webkit-border-radius). Furthermore, the CSS Working Group recently announced some pretty robust support for the border-radius property which means the usually standards-leading Opera should be getting around to roundness soon as well.
Using border-radius today provides nice, rounded corners and shaves a ton of development time (no more round-trips to the image editor or nesting HTML for flexible dimension boxes).
The problem, of course, is that 70% gorilla in the corner. So, what about IE? The yet-to-be-released IE8 is finally getting things right with CSS2.1 (a good thing) and moving their proprietary properties into -ms- vendor specific extensions (also a worthy effort). Yet it doesn’t look as though the IE team will be tackling border-radius until IE9 (2 years?).
Progressive Visual Enhancement
So at this point we have two options when it comes to going all CSS on rounded corners: we can whine and cry about how IE sucks (been done already) and wait for IE to get around to border-radius or we can take progressive enhancement to the next level.
- Lay a foundation of basic borders—square, un-adorned, solid borders. Every browser shall see squared edges by default. No problemo.
- Then throw in some rounded corners for Firefox and Safari and anyone else that’d like to join the party. Kewl.
- Lastly, add a dash of gradient to Safari as prescribed in Shiny Happy Buttons. Brilliant!
Sweet. No one gets hurt, the cool kids get the nicest looking stuff, and those squares that want to join the cool kids just have to download a free browser. What could be better?