Rounded cornes (border radius) Safari issue

Question

.activity_rounded  {     -webkit-border-radius: 50%;     -moz-border-radius: 50%;     border-radius: 50%;     -khtml-border-radius: 50%;     border: 3px solid #fff;     behavior: url(css/PIE.htc); } <img src="img/demo/avatar_3.jpg" class="activity_rounded" alt="" /> 

This is my CSS & HTML. I want to make an image look like a circle. Everything works fine in IE8+, Google Chrome and Mozilla Firefox. But Safari is acting kinda strange. Here is a demo picture:

Answer 1

To illustrate the problem in Safari, let's begin with a plain image.

Here we have an image of 100px x 100px. Adding a border of 3px increases the element dimensions to 106px x 106px:

Now we give it a border radius of 20%:

You can see it starts cropping from the outer boundary of the element, not from the image itself.

Further increasing the magnitude to 50%:

And changing the border color to white:

You can now see how the issue arises.

Because of such behavior of the browser, when creating an image in a circle with a border, we have to make sure both the image and the border are given a border radius. One way to ensure this is to separate the border from the image by placing the image inside a container, and apply border radius to both of them.

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

And now we have a nice circle border around the image on Safari.

See DEMO.