Why Are My Images Cropped When Using `border-radius` in Safari?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-12-13 17:48:12

Original

691 people have browsed it

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;
}

Copy after login

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!