Why is Border-Radius Not Working for Images in Chrome?

Border-Radius Not Displaying Images inWebKit

Despite applying border-radius styles to the #screen element using all prefixes and the standard syntax, the element remains untouched in Google Chrome, while it appears as expected in Firefox and Internet Explorer 9. This issue arises due to a bug in Chrome's handling of border trimming for images.

Workaround to Resolve Chrome Bug:

To resolve this issue, implement the following workaround:

<code class="css">.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}</code>

This technique will modify the element's perspective, which forces the rendering engine to behave correctly. It does not affect the display of the element, unlike other workarounds such as setting the opacity to 0.99.

The above is the detailed content of Why is Border-Radius Not Working for Images in Chrome?. For more information, please follow other related articles on the PHP Chinese website!