The problem of rendering border borders in Firefox

Question

It looks like Firefox (32, 35, 36) adds a nice gray corner when rendering the radius:

Here is also a very simple test: http://jsfiddle.net/imehesz/5ete1ctp/

.abox {
width:100px;
height:100px;
background-color: red;
border-left-color: rgb(0, 255, 87);
border-left-style: solid;
border-left-width: 10px;
border-right-color: rgb(0, 255, 87);
border-right-style: solid;
border-right-width: 10px;
border-bottom-color: rgb(0, 255, 87);
border-bottom-style: solid;
border-bottom-width: 10px;
border-top-color: rgb(0, 255, 87);
border-top-style: solid;
border-top-width: 10px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;    

-moz-box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
-webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255),0 0 0 0 rgb(127, 127, 127) inset;
box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
}

If I remove background-colorOR box-shadow, it will work. But in my case I need it.

Is there any way to fix this? (I have not seen anyone report this problem on the Internet!)

Answer 1

What you see is the shadow of the window. If you remove the shadow, the "fine gray corner [s]" disappears.

Firefox (38.0.5):

---

Chome (43.0.2357.81 m):

.abox {
    width:100px;
    height:100px;
    background-color: red;
    border: 10px solid rgb(0,255,87);
    border-radius: 20px;
}
.abox:first-child {
-moz-box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
-webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255),0 0 0 0 rgb(127, 127, 127) inset;
box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;  
  }

With shadow:
<div class="abox"></div>

Without shadow:
<div class="abox"></div>

Run codeHide result