So a designer walks into a bar with a bunch of browsers and the bartender asks, “Where’s that blue guy?” The designer LOLz and responds, “Who? Internet Explorer? We left him ’round the corner.”

Of all the web design tasks that CSS3 makes easier, rounded corners are probably the most ubiquitous. They’re used all over MailChimp.com and inside the app as well. In the past, there were plenty of novel and somewhat spiffy methods for softening corners on the web but none of these were as straightforward and easy to implement as the standardized “border-radius” property that we’ve all come to know and love.

Last week I got into an interesting conversation with some of the DesignLab guys about the pros and cons of using CSS for rounded corners. It all started when Ron pointed out the newly redesigned signup form at tumblr.com. (Screenshot on the right.) “Those inputs are just so pretty. Look at those corners!” So look we did, hoping to find some magic formula for producing gorgeous corners and noticed that their pretty inputs relied on a background image applied to a wrapper div.

There’s really nothing wrong with using a background image. In fact, an image has the luring benefit of visual consistency across all browsers. Meanwhile border-radius is completely ignored by IE8 and below. To me though, rounded corners are merely a textural enhancement, so leaving them off in IE has never been a deal breaker.

As we talked more I learned that it wasn’t IE’s complete lack of support that bothered the designers. Instead it was the inconsistent “crunchieness” of the corners in the various browsers when combined with other CSS effects. I was surprised to learn that they even had an untested theory that odd numbered radius values looked best. To me, that meant it was time for some experiments. Read More