Firefox not rendering correctly with: border-radius,box-shadow and border

Question

In the example bellow:

http://jsfiddle.net/Du8f6/3/

Im setting inner shadow to the container and 10px border with border-radius set to 50%. And the result is weired thin white border outside the container border.

The thin white border is visible in:

mozilla firefox
ie 11

and its not visible in:

opera
safari
chrome

any suggestions for fixing this are welcome.

Answer 1

It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.

Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper div:

In your html:

<div class="fakeborder"><div class="sub">Hm</div></div>

and in your css:

.sub {
    ...
    border: 0px solid black;
    ... 
}

.fakeborder{
    margin:0;
    padding:10px;     /*The fake border width*/
    background:black; /*The fake border color*/
}