Why Are My Images Cropped When Using `border-radius` in Safari?

Safari Rounded Corners Issue

When using border-radius to create rounded corners on images, Safari can exhibit erratic behavior. This is because the browser's rendering engine considers both the image and any surrounding border in the calculation of the rounded corners, resulting in undesired cropping.

Understanding the Problem

Let's illustrate the issue using an image of 100px x 100px. Adding a 3px border increases the element dimensions to 106px x 106px. Now, applying a border radius of 20% results in the corners being cropped from the outer boundary of the element rather than from the image itself.

Solution: Separating Image and Border

To resolve this issue in Safari, we must ensure that both the image and the border have rounded corners. One way to achieve this is to separate the border from the image using a container element, applying border-radius to both the container and the image.

Example

CSS:

.activity_rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
}

.activity_rounded img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
}

This approach ensures that both the image and the border have rounded corners, resulting in a consistent appearance across all browsers.

The above is the detailed content of Why Are My Images Cropped When Using `border-radius` in Safari?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn