Firefox not rendering correctly with: border-radiu

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

I had a similar issue. Even if I set

box-shadow:0 0 0 rgba(0,0,0,0);

to the element just because I didn't want a box-shadow for that element and I thought I could override the property like this.

That was working in webkit browsers, but FF was still rendering a thin shadow.

A better solution and the best practice to override a css property to its default, it is obviously set it to its default (dumb!)

box-shadow: none

Answer 2

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*/
}