开发者

Which version of Firefox supports rounded corners on bordered elements via moz-border-radius?

开发者 https://www.devze.com 2023-03-30 20:43 出处:网络
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 corner

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):

Which version of Firefox supports rounded corners on bordered elements via moz-border-radius?

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:

Which version of Firefox supports rounded corners on bordered elements via moz-border-radius?

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:

Which version of Firefox supports rounded corners on bordered elements via moz-border-radius?

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:

Which version of Firefox supports rounded corners on bordered elements via moz-border-radius?

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号