Standards Compliancy is a lie (or, how all browsers have a broken border-radius)

July 6th, 2010

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

Chrome 5 vs. FirefoxChrome 5.0.375.99 on the left, Firefox 3.6.6 on the right, Windows 7 with ATI X300

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:

border: 3px solid #999;
background-color: #f00;
border-radius: 20px;

zooming-in the issue:

Firefox 3.6.6

Chrome 5

Opera 10.60

IE9 pre 3

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.

4 Responses to “Standards Compliancy is a lie (or, how all browsers have a broken border-radius)”

  1. Zach Leatherman says:

    This doesn't seem all that painful. Isn't this why we have vendor prefixes?

    Which browsers have removed the vendor prefix and use just border-radius?

  2. gonchuki says:

    Actually both Opera and the IE9 preview work without any vendor prefix for border-radius. None of them get it right.

  3. Keith Cirkel says:

    It's fine that all browsers have lost the vendor prefix, because the vendor prefix is there for syntax/lexical changes, so that any change to the standard doesn't destabilise existing website based on the vendor-prefix syntax standard (case in point, look at -moz-gradient and -webkit-gradient).

    The bug here is a rendering issue. It's still bad, but its just rendering issues, fixable without impact. Bear in mind this is CSS3 W3C Candidate Recommendation, not a W3C Standard – meaning it's all very new still.

  4. gonchuki says:

    I understand that CSS3 is not a finished standard, but this post from early 2007 shows how we had border-radius support in Gecko and Webkit for well over 3 years. It's clearly not a feature that was added sometime last Thursday.

Leave a Comment