Firefox: border-color, border-radius and background color creates ragged edges and white space

Question

Take a look at the following HTML and CSS.

.box {
    border-radius: 15px;
    border: #333 solid 3px;
    background: #333;
}

&l         


        

Answer 1

This is most likely a bug in Firefox. You could do a simple trick to solve this problem: (it's not the best solution, I know, but the problem seems to be serious)

markup: a fake border through a 'wrapper' div

    
Hello world

css: padding does the trick

.wrapper {
    border-radius: 15px;
    background: #333;
    padding:3px; /*simulating border*/
}
.box {
    border-radius: 15px;
    background: #333;
}

http://jsfiddle.net/steweb/peYRf/

---

OR a more elegant way to solve the problems (without add another div) could be adding a shadow on the box of the same background-color to 'fill' that white horrible stuff i.e.

.box {
    border:3px solid #333;
    border-radius: 15px;
    background: #333;
    -moz-box-shadow:0px 0px 1px #333; /* just on ffox */
}

http://jsfiddle.net/steweb/Sy2rr/