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.