title: Firefox: border-color, border-radius and background color creates ragged edges and white space
body: <p>Take a look at the following HTML and CSS.</p>
  
  <pre><code>.box {
      border-radius: 15px;
      border: #333 solid 3px;
      background: #333;
  }
  </code></pre>
  
  
  
  <pre><code>&lt;div class="box"&gt;Hello world&lt;/div&gt;
  </code></pre>
  
  <p>It produces this in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/KvyrP.png" alt="enter image description here"></p>
  
  <p>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. </p>
  
  <p><strong>How can I overcome this?</strong></p>