Question

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

Answer 1

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.

• http://jsfiddle.net/9a3Gp/3/

Hopefully someone can come up with something better.

---

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

• http://www.webkit.org/quality/reporting.html

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

• http://jsfiddle.net/9a3Gp/

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

• https://bugs.webkit.org/buglist.cgi?query_format=specific&order=relevance+desc&bug_status=__open__&product=WebKit&content=border-radius+color