CSS Border Radius ne fonctionne pas sur iOS

Je vais avoir des ennuis avec certains des frontières sur iOS (safari).

J'ai une image (mon gravatar) qui je veux donner un tour frontière qui est de 10px solide et blanc.

Pour atteindre ce que je avoir le code HTML

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

et le CSS

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

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

Je suis en utilisant twitter bootstrap et donc le border-radius est spécifié par leur classe .img-circle (c'est pourquoi le rayon est de 500px) puis j'ai ajouté de la frontière du poids et de la couleur.

Cela fonctionne bien sur un ordinateur de bureau navigateur (Chrome), mais lors de la visualisation sur iOS (safari sur mon iPad), il montre les 10px solid blanc frontière est toujours un carré autour de l'image d'origine et le rayon est appliquée par la suite et afin de couper certains de la frontière.

CSS Border Radius ne fonctionne pas sur iOS

Quelqu'un sait comment je peux obtenir de la frontière à suivre le rayon dans iOS?

OriginalL'auteur Jacob Tomlinson | 2013-03-10

  1. 12

    Rapide et sale solution: http://jsfiddle.net/mEZEj/ Utilisation box-shadow au lieu de border.

    Propre solution: http://jsfiddle.net/TjUum/ Utiliser un bloc div élément avec l'avatar comme le background-image. Ajustez-la au besoin.

    Excellent merci. J'ai essayé la solution propre et il a causé des problèmes avec ma mise en page, donc je suis allé rapide et sale pour l'instant et je vais jeter un oeil dans le propre de l'un quand j'aurai plus de temps.

    OriginalL'auteur Jen