If you ever tried to use border-radius on <img>‘s, you know that it doesn’t always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is content, not a container, and the container is what gets rounded with border-radius. Jonathan Neal has a demo to make this work. Essentially it sets the background of the image element to itself, and then changes the src of the image to a transparent GIF data URI.
Update November 2012: The link from this original is down now, but I don’t suggest using any fancy stuff like this anymore anyway. Here’s a test Pen showing just regular old border-radius on images that works in all modern browsers.
