¶ 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).
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.
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).
Comments
1
Thanks for that. That is useful to know.
By the way, -webkit-border-radius:35px also works it seems.
Unfortunately that does not work for Firefox (3.5) either.
The reason I tried that is I do often find when using divs or other elements inside which themselves have background colors set instead of images, then they also render outside the outer border radius and applying border radius to them as well works in both Firefox and Webkit (Safari and Chrome).
If Firefox can get overflow to work that would be better though, because otherwise you have to maintain the radius amount in more than one place.
2
Good stuff. Another little workaround I’ve used is simply to make that image the background image. Obviously this won’t work in all context, but if you make it a background image, it will get clipped.
3
Great information to have. Thanks.
I’m glad Webkit is being so responsive in fixing this issue.
Like Jeff said, it works properly with background images. Once I even considered replacing a content image with itself as a background, but then decided that was silly.
4
By the way, I put your suggestion and mine into a post to demonstrate it here:
http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius
Hope that is useful?
5
Excellent write-up Anup, thanks for that.
6
the webkit-border-radius, can this be used as standerd within css, or is it a external file?
7
great time saving graphic tip. really helps maintain clean look. the imperfection is not major.
8
Could you duplicate your border-radius value for the image as an alternative workaround?
Duplication = bad, and it would only work when the image is the only content of the container, but it might work if overflow: hidden is undesirable for other reasons.
9
Strange, that the W3C Validator doesn´t like it and gives an error for -webkit-border-radius. – But it works anyway. :-)
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.