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).
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.
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.
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).