Why Are My Rounded Corners Incorrect in Safari, and How Can I Fix Them?

Rounded Corners (Border Radius) Safari Issue Explained

When using CSS to create rounded corners with the border-radius property, an unexpected issue can arise in Safari. This problem is particularly evident when attempting to transform an image into a circle with a border.

In Safari, the browser calculates the border radius based on the outer boundary of the element, including any borders, rather than on the image itself.

To illustrate this, consider an image (100px x 100px) with a border of 3px, which results in an element size of 106px x 106px. Adding a border-radius of 20% to this element crops the image from the outer edge of the element, leaving a white area around it.

This behavior becomes even more apparent at higher border radius values (e.g., 50%) and when the border color is set to white.

To resolve this issue in Safari, it is necessary to apply border-radius to both the image and the container element:

<div class="activity_rounded">
  <img src="http://placehold.it/100" />
</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 separation ensures that the border-radius is applied correctly to both the image and the surrounding element, resulting in a circle border around the image in Safari.

The above is the detailed content of Why Are My Rounded Corners Incorrect in Safari, and How Can I Fix Them?. For more information, please follow other related articles on the PHP Chinese website!