This bug affects both Chrome 17.0.963.56 and Safari 5.1.2 (reproduced on Windows 7). Even though I’m not the first one to come up with this bug, I’m wondering why it hasn’t been fixed after all those years(!).
Reproducing this bug is quite simply, which makes me wonder even more..
border: 1px solid green;
What, per definition, should happen, is:
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. (W3, CSS Backgrounds and Borders Module Level 3, 5.3 Corner Clipping)
What the Webkit browsers (Chrome 17.0.963.56 & Safari 5.1.2) are doing:
The border is correctly drawn around the img. On the edges, where the border-radius property applies, the border is rounded correctly. But the image gets cropped at the outside of the border, which causes the image to sort of overlay the border. If the border-radius is big enough, the edge of the image gets cropped by the outside of the border.
What Firefox (10.0.2) and even Internet Explorer 9 are doing:
Firefox & Internet Explorer are doing it like a boss
Even though I wont use a workaround in this case (principle), I will provide one.
The key is to wrap the image in a container, and giving all the styles (border, border-radius) to it. In order to clip the image on the inside, the overflow:hidden; property is needed too.
Not quite the best solution since – depending on the quantity of images on your site – it creates a lot of unnecessary html code. And it smells a little, too.
- http://code.google.com/p/chromium/issues/detail?id=82417 (2011)
- https://bugs.webkit.org/show_bug.cgi?id=30475 (2009)
Update 07.03.2012 16:40
I just updated to Chrome 17.0.963.66, still no bugfix.