Question

I just discovered -moz-border-radius implements rounded corners on the wrapped/bordered element also, for instance an image with moz-border-radius applied to it will have rounded corners itself also.

I cannot seem to find specifics in the Firefox changelogs, so is there anyone that knows which (major) Firefox version started supporting this? Firefox 3.6.5 didn’t yet.

Answer 1

I am not on about the corner radius of the borders, I am referring to
the actual cornering of the wrapped element, for instance an image.

Only Firefox since version 4 Windows (since v5 Linux), IE 9, Chrome and Safari will round the corners of the actual image in this instance. This can be seen more clearly when the image does not have a border applied.

.demo-rounded-image img {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;    /* W3C property should appear last */
}

<div class="demo-rounded-image">
<img src="img/beetle.jpg" width="200" height="200" alt="Beetle">
</div>

Screenshot from Chrome 13 (Same as FF 4 Win):

Firefox 3.6 and Opera 11.5 do not round the corners of the image. (Yes, they will round the corners of a border, if applied, but the image will stick out the corners.) Screenshot from Firefox 3.6.21:

However, even in the browsers that round the image, as soon as you start to apply a border to the image, the effect starts to get lost. Screenshot from Chrome 13:

Update (Sept 2012)

Opera 12.02 (the latest and greatest) supports rounded corners on the img element itself, and correctly handles it when a border is applied.

Update (April 2013)

Later versions of Google Chrome (tested version 26) also now correctly handles rounded corners on an image when combined with a border (as with the previous Opera update above). This results in the following: