Promień krawędzi CSS nie działa na iOS

Question

Mam problem z obramowaniem w iOS (safari).

Mam obraz (mój gravatar), który chcę nadać okrągłe obramowanie, które jest 10px stałe i białe.

Aby to osiągnąć muszę HTML

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

i CSS

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

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

Używam bootstrap Twitter i tak border-radius jest określona przez ich klasa .img-circle (dlatego promień ma 500px), a następnie dodałem wagę i kolor obramowania.

Działa to dobrze w przeglądarce na komputerze (Chrome), ale podczas wyświetlania w iOS (safari na moim iPadzie) pokazuje, że 10-pikselowa biała ramka jest nadal kwadratem wokół oryginalnego obrazu, a promień jest stosowany po i tak odcina część granicy.

Czy ktoś wie jak mogę dostać granica śledzić promień w iOS?

Answer 1

Szybkie i brudne rozwiązanie: http://jsfiddle.net/mEZEj/ Użyj box-shadow zamiast border.

Czyste rozwiązanie: http://jsfiddle.net/TjUum/ Użyj elementu bloku div z awatarem jako background-image. Dostosuj w razie potrzeby.