CSS边框半径不适用于iOS

Question

我在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/

我使用Twitter的引导，因此被指定的边界半径他们的class .img-circle（这就是为什么半径是500px），然后我添加了边框的重量和颜色。

这适用于桌面浏览器（Chrome），但是当在iOS上浏览时（我的iPad上的safari），它显示10px实心白色边框仍然是原始图像周围的正方形，半径应用于此之后，因此中断一些边界。

有谁知道我如何能得到边界遵循的iOS半径？

Answer 1

快速和肮脏的解决方案：http://jsfiddle.net/mEZEj/使用box-shadow而不是border。

干净的解决方案：http://jsfiddle.net/TjUum/使用块div元素与化身作为background-image。根据需要调整。