CSS Border Radius не работает на iOS

у меня возникли проблемы с границами на iOS (safari).

у меня есть изображение (мой gravatar), которое я хочу дать круглую границу, которая является твердой и белой 10px.

для достижения этого у меня есть HTML

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

и CSS

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

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

Я использую bootstrap twitter, и поэтому радиус границы определяется их классом .img-круг (именно поэтому радиус 500px), а затем я добавил вес и цвет границы.

это хорошо работает в настольном браузере (Chrome), но при просмотре на iOS (safari на моем iPad) он показывает, что сплошная белая граница 10px по-прежнему является квадратом вокруг исходного изображения, а радиус применяется после и поэтому отрезает часть границы.

кто-нибудь знает, как я могу заставить границу следовать радиусу в iOS?