Cropping corners of an image with a border radius set in the parent div does not work in Safari

Question

I have an image placed inside a div, the div has rounded corners that work like a mask to hide the corners of the image and display them as a circle. It works in all browsers except Safari! Does anyone know how to fix this?

I tried -webkit-padding-box , -webkit-mask-box-image , but both of them did not 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

This is best determined by specifying overflow: hidden; in the parent element.

Answer 2

What version of Safari are you working with?

A few (unsatisfactory) explanations for this problem: How to make CSS3 rounded corners hide overflow in Chrome / Opera

You highlight the <img /> content stream using position:absolute; . In doing so, you must also change your display attribute to block. Then it also makes sense to set the border radius to img .

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

Answer 3

Another simple solution is to add the border-radius property to the img tag, as well as its value.

By the way, you can use the HTML5 figure tag to store images. I have not tested it in more than a few browsers for a while, but last time I still needed a workaround for double border-radius in older Firefox.