Day after day we see a new release from one of the major internet browser developers boasting how they comply with web standards and how they are targeting a gazillion of experimental features that no one cares about (I bet only 3% of web developers cared to study the bible of -webkit prefixes), yet except for Firefox* all of them get border-radius completely wrong (Firefox actually has a minor annoyance but it's bearable). Can you say you are standards-compliant if you have a broken implementation?
a little back story
A few months ago, the IE Blog showcased some IE9 goodness and made a call to action for better border-radius implementations. They rightfully shown how they are getting it right this time, and how most other browsers out there are broken, with Safari/Chrome (Webkit) being the worst still at the time of writing this article. But not everything in their implementation is correct, IE9 pre 3 still exhibits the same issue as the other browsers that I'm presenting today.
the big bug theory
So what's the issue with border-radius? simple answer: the background color bleeds behind the radius when you also have a border in the same element.
Let's first use a real world example of a live site that paradoxically exposes the bug: HTML5 Rocks Playground
See the blue garbage on the rounded corner? that's what most browsers do.
Now, to rule out a possible specific software/hardware combination, I went thru several test machines and browsers to see if the bug was repeatable:
reproducing the bug
So how hard is to reproduce the bug? sadly, not at all. Here's the base recipe for disaster:
1 2 3
border: 3px solid #999; background-color: #f00; border-radius: 20px;
zooming-in the issue:
given the previous example and screenshots, you might have noticed the other issue: Firefox is not actually bug-free. It has a slight issue blending the element background with the border. it's not as bad as the bleeding issue, but it's still annoying. Also from the previous set and this one, we notice how the IE9 and Opera 10.60 implementations are an order of magnitude better than what Webkit achieves.
finding a work-around
As you might have guessed, the only reliable work-around to date is nesting rounded elements when you need a distinctly colored border. Using padding on the outer box equal to the border-width required does the trick and works across all browsers:
Of course it's not all fun and games, you need to specify a different border-radius for the inner box as they both have different sizes. In this case, the outer box has 25px while the inner one has 23px.
Can we stop with the pain already? How many years have passed since the first border-radius implementation and they are still getting it wrong?
this is how I feel about the current state of border-radius:
Can every browser get it right before boring us once again with their endless speech on how shiny and compliant they are? It's not frelling rocket science.