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

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

htmlsafaricss


Solution 1:[1]

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

Solution 2:[2]

What Safari version do you work with?

Several (unsatisfying) explanations for that problem: How to make CSS3 rounded corners hide overflow in Chrome/Opera

You are taking out <img /> of content flow with position:absolute;. By doing so, you should also change its display attribute to block. Then it makes sense to put border-radius on img too.

See http://jsfiddle.net/Volker_E/LgYrz/
Note: On very old Webkits (Safari < 5.0) -webkit-border-radius is necessary

Solution 3:[3]

Another simple workaround is to add the border-radius property to the img tag as well, and give it the same value.

BTW you can use the HTML5 figure tag for containing images —I haven't tested it in more than a couple of browsers for awhile but last time I did it still needed the double border-radius workaround in an older Firefox.

Solution 4:[4]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DavidVII
Solution 2 Community
Solution 3
Solution 4 Srishti

Related Questions