CSS Border Radius not working on iOS

Question

I'm having some trouble with borders on iOS (safari).

I have an image (my gravatar) which I want to give a round border which is 10px solid and white.

To achieve this I have the HTML

<img src="http://2.gravatar.com/avatar/b7c2d49748426791dc98b8214dfac9d1?s=500" class="img-circle" height="300" width="300">

and the CSS

.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
border: solid 10px white;
}

JSFiddle http://jsfiddle.net/2UT8v/2/

I'm using twitter's bootstrap and so the border-radius is being specified by their class .img-circle (that is why the radius is 500px) and then I've added the border weight and color.

This works well on a desktop browser (Chrome) but when viewing on iOS (safari on my iPad) it shows the 10px solid white border is still a square around the original image and the radius is applied after and so cuts off some of the border.

Does anybody know how I can get the border to follow the radius in iOS?

Answer 1

Quick and dirty solution: http://jsfiddle.net/mEZEj/ Use box-shadow instead of border.

Clean solution: http://jsfiddle.net/TjUum/ Use a block div element with the avatar as the background-image. Adjust as needed.