Question

I have a div that I am applying rounded corners to.

Here is my demo fiddle.

<div>&nbsp;</div>

div {
    margin: 20px;
    width: 250px;
    height: 250px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    background-color: #4c66a1;
    border: 2px solid #4c66a1;
}

I also have a border and background color applied to this div. The issue arises in Firefox. There is a small amount of whitespace between the border and the background-color of the div (see images below). It is very minimal, but people have noticed it nonetheless. It looks like a lighting effect on the corner.

Is this a known issue with rounded corners in Firefox? IE, Chrome, and Opera are fine.

FYI/ For the purposes of illustrating the issue I have made the border and background-color the same even though it’s redundant. It makes the whitespace stand out more.

 Firefox      Chrome/IE/Opera

        

Answer 1

Interestingly, if we change it to dotted, the white goes away:

div {
    margin: 20px;
    width: 250px;
    height: 250px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    border-radius: 30px;
    background-color: #4c66a1;
    border: 2px dotted #4c66a1;
}

http://jsfiddle.net/5yAkZ/23/

EDIT had invalid css previously