title: border-radius not making image circular in Safari in div with padding and border
body: <p>I have a <code>&lt;div&gt;</code> with an <code>img</code> inside.</p>
  
  <p>Structured like:</p>
  
  <pre><code>&lt;div class="gift"&gt;
      &lt;img&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>div</code> has this CSS:</p>
  
  <pre><code>display: inline-block;
  overflow: hidden;
  width: auto;
  vertical-align: middle;
  position: relative;
  border-radius: 50em;
  </code></pre>
  
  <p>The image has this CSS:</p>
  
  <pre><code>border: 1px solid 
  rgba(46, 46, 46, 0.1);
  border-radius: 50em;
  padding: 3px;
  min-height: 10em;
  height: 10em;
  </code></pre>
  
  <p>In Safari, it looks like <a href="https://i.stack.imgur.com/cSaWK.png" rel="nofollow noreferrer">1</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/cSaWK.png" alt="Safari image clipped"></p>
  
  <p>But, in Chrome it looks how it is supposed to <a href="https://i.stack.imgur.com/FEG7I.png" rel="nofollow noreferrer">2</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/FEG7I.png" alt="Chrome - image appears correctly"></p>
  
  <p>Any suggestions on how to get the image to appear in Safari the same way it does in Chrome?</p>