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

css, firefox, internet-explorer

Solution

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

Problem

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.

Original source

Related problems