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

Related and helped me to find a solution (directly modifying the img): https://stackoverflow.com/q/15167545/1066234 using CSS `object-fit:cover;` — Avatar, Feb 11 '20 at 13:41
Does this answer your question? [How to make CSS3 rounded corners hide overflow in Chrome/Opera](https://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera) — Vega, Aug 10 '22 at 08:17

score 110 · Accepted Answer · answered Jul 16 '13 at 22:36

110

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

answered Jul 16 '13 at 22:36

DavidVII

2,133
2
21
28

14

Such a simple solution! Thank you! – Jack Jun 15 '16 at 10:16

score 3 · Answer 2 · answered Apr 28 '22 at 08:13

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.

score 0 · Answer 3 · edited May 23 '17 at 12:16

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

Dave Everitt · Answer 4 · 2015-08-22T23:22:00.607

0

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.

edited Aug 22 '15 at 23:22

answered Aug 22 '15 at 17:08

Dave Everitt

17,193
6
67
97

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

4 Answers4

Linked

Related