Créer une image ronde en CSS

Tuto créer une image ronde en CSS, tutoriel & guide de travaux pratiques en pdf.

Technique pour Chrome et Safari

Le principe est relativement simple, il suffit d’utiliser la propriété border-radius CSS3 (et ses équivalents pour les navigateurs : -moz-border-radius, -webkit-border-radius). Cette propriété est appliquée sur un élément qui contient une image. On lui applique également la propriété overflow avec pour valeur hidden.
Démo
<style type= »text/css »> .roundedImage{ overflow:hidden; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:90px; height:90px; } </style> <div class= »roundedImage »> <img src= »/images/slideshow/1.jpg » alt= »1″/> </div>

Technique pour tous les navigateurs

Vous noterez tout de même que sous Firefox, Opera et Internet Explorer 9, la première technique ne fonctionne pas. Il y a donc une astuce, il suffit de ne pas utiliser de balises image et d’utiliser à la place la propriété background et cela fonctionnera sous tous les navigateurs (y compris Safari et Chrome).
Démo
<style type= »text/css »> .roundedImage{ overflow:hidden; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:90px; height:90px; } </style> <div class= »roundedImage » style= »background:url(/images/slideshow/1.jpg) no-repeat 0px 0px; »> &nbsp; </div>