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

<div class="box">Hello world</div>

It produces this in Firefox:

As you can see, the border and the background of the div leaves a tiny gap which is visible. I need the border because of a hover state with a different background-color.

How can I overcome this?

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

<div class="wrapper">
    <div class="box">Hello world</div>
</div>

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/