Which version of Firefox supports rounded corners on bordered elements via moz-border-radius?
I just discovered -moz-border-radius
implements rounded corners on the wrapped/bordered element also, for instance an image with moz-border-radius
app开发者_运维百科lied 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.
The Mozilla website seems to say it has been in there since version 1 with Elliptical corners coming in v3.5.
https://developer.mozilla.org/en/CSS/border-top-left-radius
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:
精彩评论