Why are Circular Images Cropped in Safari and How Can I Fix It?

Rounded Corners (Border Radius) in Safari

One may encounter issues when using border radius, particularly in Safari, when trying to create circular images.

In Safari, an image assigned with a border radius is cropped from the outer boundary of the element rather than from the image itself. This becomes apparent when the image is within a container with a background color different from the image's.

To resolve this issue, separate the border from the image by placing the image inside a container. Afterward, apply border radius to both the image and the container.

<div class="activity_rounded">
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/100" class="lazy" alt="Why are Circular Images Cropped in Safari and How Can I Fix It?" >
</div>

.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 ensures that both the image and the border have rounded corners, resulting in a circle border around the image in Safari.

The above is the detailed content of Why are Circular Images Cropped in Safari and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!