There is going to be a comic that gets attached to this rant, I assure you. However, I’m so fired up on the topic at the moment that I’m tossing this post out sans the punchline.

I’ve used border-radius quite a bit. As far as CSS3 goes, it’s one of my go-to styles for making something look snazzy. Just round it and it’s cool, right? Right?

While working on an internal project for Mindfly Studio, I found myself grabbing this particular tool for rounding the thumbnail images that were attached with a list of article briefs. When I went to test the results, I found to my dismay that the images were square still, with the rounded borders cutting behind the square of the image.

Then I remembered that I’d encountered this particular issue before. No problem, I thought to myself. Just wrap that bad-boy in a div (or in this case, an anchor that already existed around the image) and use border-radius on the wrapper. Perfect! Right?

No, sadly.

At this point I felt like my CSS cred was rapidly drying up, and started debating going by JSONSquirrel instead.

“To the cloud!” I pronounced, feeling inclined to abuse buzz words, and fired up Twitter. I was informed this was an issue with Firefox (my browser of choice. I like big butts and I cannot lie) but that it’d be all peachy in Webkit (also known as Apple Browser Jesus in web designer circles).

But as it turns out, Webkit also does it wrong. Less wrong, but wrong.

Here’s my proof: border-radius test page.

What Webkit does correctly is round the corner of the image itself (when the border-radius property is set for the image, but not the wrapper), but it clips the border if one exists. If placed in a wrapper, like Firefox, it fails altogether.

I tested on the following browsers: Safari 5, Chrome, Firefox 3, Firefox 4 Beta, Opera 10.63, Internet Explorer 8 and Internet Explorer 9 Beta. It’s no shock that IE8 didn’t do what I wanted, as it doesn’t support border-radius at all. Although, humorously enough, their outright failure to round the border (while leaving the image square) was still more aesthetically pleasing than the clipping/overlapping that were the results in Firefox, Webkit and Opera. And yes, Firefox 4 Beta also failed to round the corners as I desired.

Unexpectedly, IE9 Beta did exactly what I desired, which was rounding the image with the border intact (and rounded) with it. The only one, in fact, to do so. That was a shock.

Maybe I’m expecting this property to do something other than its actual purpose. That said, wouldn’t an image tag be the most likely case of an element that you’d want a rounded border to work properly with? It certainly is for me.

I’m aware that setting a background-image on an element and rounding it is a workaround that functions perfectly. However, if styles are turned off, you lose the image. What if you want the actual image present regardless of whether CSS was present? Well, at present, go with square corners, it seems.

If someone more clever than me comes up with a way around this that is CSS-based (and not overlapping it with a PNG with a rounded hole in it or some other such workaround) then please let me know. I’d be really curious to see how others tackle this shortcoming.