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

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?

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/

I encountered the same problem today, also unique to Firefox in my case (for different reasons than rendering issues in 2011) but the answer should still be relevant to anyone else ending up here today.

My problem was that I had two elements, one parent and one child. I set them both to border-radius: 8px expecting a perfect rounded corner, but I ended up with a similar cresent gap as the one found in the question.

The solution in my case was to set the child's border-radius to a value slightly smaller than the parent's. Run the code below to see the problem and solution:

.container {
  border: 3px solid black;
  border-radius: 8px;
  margin-bottom: 1em;
  text-align: center;
}

.inner {
  height: 50px;
  background-color: hotpink;
}

.inner.same    { border-radius: 8px; }
.inner.none    { border-radius: 0px; }
.inner.smaller { border-radius: 5px; }

<div class="container">
  <div class="inner same">Same border radius</div>
</div>

<div class="container">
  <div class="inner none">No border radius</div>
</div>

<div class="container">
  <div class="inner smaller">Slightly smaller border radius</div>
</div>