CSS3 Border-Radius with one border colored differently is bleeding its color

3
votes

I have a fluid-width div with rounded corners using the border-radius, as well as a large border on one-side of the div colored differently.

When the browser window is small enough, the borders all behave as it should. However, when I enlarge the window size, I start to see the color bleed through in the center of my div.

I was wondering if anyone had an idea of a possible solution could be.

The div has two classes:

.info-box {border: 1px solid #CCC; margin-bottom: 15px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: #F3F3F3;}

.seller-msg {border-left: 7px solid #EF831B;}

It seems like the height of the div is also affecting it as well somehow.

Screenshot

1
bordercss
"the browser window" What browser? - BoltClock♦
Hmm do you observe this in any other browsers? - BoltClock♦
Just tested it, and it appears to happen only in Webkit =( - johncho

1 Answers

3
votes

Crikey, looks like you’ve found a WebKit bug. Nasty one.

The best I can come up with for a workaround is to add an extra <div> (whee, it’s like IE6 all over again) inside .seller-msg, and put the thin grey border on that <div> instead.

Hopefully someone can come up with something better.

If you wanted to report the bug to the WebKit team, the procedure is detailed here:

I’ve downloaded the latest nightly build (r106067 on Mac OS X at time of writing), and the bug is present there too:

I’ve also done a Bugzilla search for “border-radius color”, and I can’t see any bugs that match this one.