title: Are Safari & Mobile Safari rendering rounded borders with radius and padding incorrectly?
body: <p>Safari and Mobile Safari seem to have a problem when you combine border radius, padding and borders. Works fine in Chrome and Firefox.</p>
  
  <p><img src="https://i.stack.imgur.com/LVcL4.png" alt="Expected Outcome"> &lt;-- Expected</p>
  
  <p><img src="https://i.stack.imgur.com/0yvcg.png" alt="Safari Rendering"> &lt;-- Safari Rendering</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img src="http://lorempixel.com/200/200/animals/3/" /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>img {
      width: 200px;
      height: 200px;
      -webkit-border-radius: 500px;
      -moz-border-radius:    500px;
      border-radius:         500px;
      padding: 3px;
      border: 1px solid #999;
      margin: 10px
  }
  </code></pre>
  
  <p>Example: <a href="http://jsfiddle.net/ucNwx/2/" rel="noreferrer">http://jsfiddle.net/ucNwx/2/</a></p>
  
  <p>Is it my fault or Safaris? How would I fix it?</p>