Chrome bug: border-radius + border with same color as background -> artifacts

Question

Sorry for the obtuse title; here's a jsfiddle example .

Basically, I've got a div inside of another one. The big one has a light blue background, and the little one has a darker blue background.
I want to give the smaller one a border on hover, so I start it with the same size border but the same color as the background (so that it doesn't move around when the border is added).

This border that is the same color as the background artifacts when there's a border radius. Take a look at Chrome:

But Safari is fine:

Is this a known bug? Can I submit a report?
And more importantly, is there a workaround?

Answer 1

How about making your border transparent:

border: 2px solid transparent;

To make this work in IE6, you can add:

*html #inner
 {
   border-color: pink;
   filter: chroma(color=pink);
 }

The IE workaround is from http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/

Answer 2

Sometimes you can solve these issues by using background-clip: padding-box; .

It doesn't work quite perfectly on your jsfiddle example ( http://jsfiddle.net/KPAVU/5/ ), but may have better results with the real markup.