Why is Border Radius Not Working on Images in Chrome?

CSS Border Radius Not Applied to Images in Webkit

Having trouble applying border-radius to the #screen element using Chrome but not other browsers? This issue is likely due to a flaw in Chrome's handling of image trimming.

The #screen element uses CSS to set a background image rounded with border-radius:

#screen {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

However, in Chrome, the image appears to be unaffected by the border-radius property.

Workaround

To address this bug, a workaround is available:

.element-that-holds-pictures {
    perspective: 1px;
}

Applying perspective to the parent element containing the images forces Chrome to correctly apply border-radius without distorting the image quality. This workaround does not affect the display, unlike other alternatives such as opacity:0.99.

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