Закругленные углы в Firefox: пространство между границей и фоном

Question

У меня есть div, к которому я применяю закругленные углы.

Вот моя демонстрационная скрипка .

<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;
}

У меня также есть границаи цвет фона применяется к этому div.Проблема возникает в Firefox.Между границей и цветом фона элемента div есть небольшое количество пробела (см. Изображения ниже).Это очень минимально, но люди все же заметили это.Это похоже на эффект освещения на углу.

Это известная проблема с закругленными углами в Firefox?С IE, Chrome и Opera все в порядке.

К вашему сведению / В целях иллюстрации проблемы я сделал границы и цвет фона одинаковыми, хотя это и избыточно.Это делает пробел более заметным.

Firefox      Chrome/IE/Opera

Answer 1

Интересно, что если мы изменим его на пунктир, белый уйдет:

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/

РЕДАКТИРОВАТЬ ранее имел недопустимый CSS

Answer 2

См. https://bugzilla.mozilla.org/show_bug.cgi?id=704399, который исправлен в Firefox 11 и новее.

Answer 3

Проверьте, хотите ли вы это JsFiddle

<div id='ex1' class='exampleRound'>&nbsp;</div>

#ex1{
    border-radius: 50px;
    height: 200px;
    width: 200px;
}
.exampleRound {
    background: none repeat scroll 0 0 #4c66a1;
    border: 5px solid pink;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 20px 40px;
    margin:20px
}