Trimming image corners with border-radius set on parent div doesn't work in Safari

Question

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?

I tried -webkit-padding-box, -webkit-mask-box-image but both didn't work.

HTML:

<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div>

CSS:

.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;
}

fiddle

Answer 1

The best way around this is by specifying overflow: hidden; on the parent element.

Answer 2

This is due to the fact that the parent element has border-radius applied to it but the image doesn't have any. The image tries to overflow and hence override the border-radius applied on the parent element.

Simple Solution:
In addition to setting the border-radius on parent element, you also need to add following CSS rule to the img tag:

img {
   border-radius: inherit;
}

Caveat:
If your image does not load correctly and you still want the border-radius to be applied, the above approach may not work and you may have to use the following CSS rule on the parent element:

div {
   overflow: hidden;
}

Note that overflow: hidden must be used with caution as it may interfere with other pseudo-elements you may have with respect to the parent element.