title: Trimming image corners with border-radius set on parent div doesn't work in Safari
body: <p>I have an image placed inside a div, the div has rounded corners which works as a mask to hide the image corners and display it as a circle. It works in all browser except for Safari! does anyone knows how to fix it?</p>
  
  <p>I tried <code>-webkit-padding-box</code>, <code>-webkit-mask-box-image</code> but both didn't work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="cat"&gt;&lt;img src="images/colorful-flowers-hd-wallpaper.jpg" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.cat{
      width: 128px;
      height: 128px;
      margin: 20px 96px 0px 96px;
      position: relative;
      float: left;
      border-radius: 50%;
      overflow: hidden;
      border-top: 1px solid #111;
      border-bottom: 1px solid #fff;
      background: #fff;
      -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
      box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
  }
  
  .cat img{
      position: absolute;
      border: none;
      width: 138px;
      height: 138px;
      top: -8px;
      left: -8px;
      cursor: pointer;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/arcm111/bDyKq/" rel="noreferrer">fiddle</a></p>