Nov 25, 2009
Cutting Corners
I noticed while redesigning this site that Firefox doesn’t support CSS3’s border-radius on images. I assumed it would work by default, and was even more stumped when I noticed that WebKit did render the images with rounded corners.
So I did some digging on the subject. As David Baron notes on the appropriate Mozilla bug page, the W3C spec declares the following:
It is recommended that the UA style sheet apply
overflow: hiddento elements (such as theelement in HTML) that are expected to be replaced elements so that their corners automatically trim to the border radius.
This means that rounded corners should work on images as long as you give them overflow: hidden;. However, this isn’t the case in any browser, as far as I know. Safari and other WebKit browsers display the rounded corners even without the overflow set to hidden, and Firefox just doesn’t display them at all.
It appears the only way to achieve CSS3 rounded corners on images in Firefox is to wrap them in block elements of the same dimensions and apply border-radius to those elements instead. This is a bit of a dirty hack, which is why I’ve chosen to stick with using border-radius on the images themselves, even without support in Firefox.
Do you think border-radius should work on images? If so, should the style also work on other elements as well? Leave your thoughts below.
Posted by Ray Brown on 11/25 at 01:37 PM
Web Development •
Permalink