How to stop images breaking rounded corners in Safari

Currently when you place an image (or any ‘replaced content’) inside a block with rounded corners set by -webkit-border-radius, the image pokes through the rounded corners on Safari (version 4.01 at the time of writing).

Screenshot from Safari 4.01
Image breaking through rounded corners in Safari 4.01

The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by applying overflow:hidden to the container, as per my little test case.

Screenshot from Safari 4.01
Image cropped at the rounded corners in Safari 4.01

As you can see it’s still not perfect as the image overlaps the border. However work is at hand to rectify the situation, which was seemingly caused by a vagueness in the CSS 3 Backgrounds and Borders module.

On the CSS WG public mailing list it was resolved that “overflow:visible does not allow replaced content to overflow”. To which Dave Hyatt, the Safari and WebKit Architect, responded:

Just so I understand, you’re saying that images should be clipped to border-radius even when overflow is visible? I need to make changes to WebKit if so.

The reply from fantasai being:

Yes. I think we need it to clip to the content-box radius, though not the border-box radius. Otherwise the corners won’t be round if there’s borders or padding.

So future versions of Webkit and Safari will no longer require overflow:hidden for images and rounded corners to play nicely.

What about Firefox?

I originally put this post together on the mistaken assumption that Firefox 3.5 deals with images and border-radius correctly, or at least supports the overflow:hidden approach. I was wrong on both counts, and there’s a reported bug to that effect. The only way around it (and this works for Safari too) is for the image to be set as a background rather than inline, which sucks somewhat.

What about Opera and Internet Explorer?

For the record, Opera will support border-radius from Presto 2.3 onward (so after Opera 10, which is Presto 2.2 based). Internet Explorer will probably support border-radius once the CSS 3 Backgrounds and Borders module reaches Candidate Recommendation status (it’s a last call Working Draft at the time of writing).