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.