title: 50px border radius looks cracked in Firefox
body: <p>I am using <code>border-radius: 50px;</code> to make a round border. It works perfectly in Chrome and some other browsers, but it looks cracked in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/VgjBI.png" alt="Firefox screenshot"></p>
  
  <p>This is how it looks in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/UERE3.png" alt="Chrome screenshot"></p>
  
  <p>Here is my code:</p>
  
  <pre><code>li {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 16px 16px;
      border: 2px solid #FFF;
      cursor: pointer;
      display: inline-block;
      height: 50px;
      margin: 0px 5px;
      width: 50px;
      transition: all 0.3s ease-in-out 0s;
      color: #FFF;
      line-height: 47px;
      font-size: 20px;
      border-radius: 50px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5mUkw/" rel="nofollow noreferrer">fiddle</a></p>