This reply has been reported for inappropriate content.
Safari doesn’t clip the image either. It’s only a candidate recommendation, but the specs show it should be clipped: 5.3. Corner Clipping
A box’s backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
Hey, thanks for your help. Looks like webkit doesn’t need the -webkit prefix anymore (http://php.quicoto.com/drop-the-webkit-prefix-for-border-radius/ ; can’t find something more official just right now).. so, any ideas on how to keep border-radius for FF4 (and not -moz-border-radius for FF3.6 since it doesn’t clip the image either), yet hide it from webkit browsers until they actually clip the image like FF4 does? I know this is asking for a lot, and I don’t want something too hacky.. :)
I had a similar situation with a slideshow that would not clip the corners. I had some space around it so I set a rounded-corner div on top of it with thick borders that matched the background. The slideshow appeared through it with the effect of rounded corners.
For some reason overflow:hidden and position:static fixes it. In my case it worked until I hovered over the image (as it was a link) then the bug was there again! I fixed this by adding border-radius to img:hover:
Hope this helps anyone! Webkit need to sort this bug out.