May 13, 2011

Crunchie Corner Lab

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.

First off, I created a simple HTML document with a row of 10 floated divs, each with a 1px black border and an incrementally increasing border-radius. Next, I took screenshots of each row of blocks in the latest versions of Chrome, Opera, Firefox and Safari and pasted them into a Photoshop document. I then created the same 10 shapes inside Photoshop using the rounded rectangle tool, modifying the radius value of each shape to match the border-radius applied in the HTML version. As you can see in the image below, there are some slight, but noticeable differences between the rows. Some of the corners look a little blurry and/or pixelated (aka, crunchie), but can you tell which row is which? I didn’t think so. (Hint: Hover over the image to reveal answer.)

Top to bottom: Photoshop, Firefox, Safari, Opera, Chrome

To me, this test prompted more questions than answers. Why do Safari’s borders look so much smoother than Chrome when they both rely on the same rendering engine? How will this pixelation affect CSS box-shadows? What would happen if I varied the border width or tried higher radius values? Before I knew it, I had created dozens of variants of my original row of floated divs, modifying the page background, border properties and other styles so I could hunt down problems in various browsers.

One of the most annoying results was the faint pixelated halo that could be seen around the corners when the page background was different from the border color. You can see the effect I’m talking about in the screenshot below. The teal circle shows a zoomed in view of the corner.

At first, this glitch only appeared in Safari, but I also saw it in Firefox when I added any kind of box-shadow to the block. As I continued experimenting with different CSS properties, I discovered a recent addition to Paul Irish’s excellent CSS3Please.com site. It was there that I learned that setting:

background-clip:padding-box;

prevents the background color (or background image) from leaking outside the border. As you can see, the corners below look much better.

Rather than trying more of these one-off experiments, I decided that I needed a way to automate this process. I wanted to be able to see a bunch of blocks with varying thicknesses of borders that I could dynamically apply different settings to. After some tinkering, what I finally ended up with was the Crunchie Corner Lab. It’s a MailChimp labs project that allows you to perform your own experiments to see how a variety of different borders, colors, radius values and shadows affect the display of your fancy rounded corners.