Créer une image ronde en CSS3

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>

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>

Démo

La technique la plus compatible reste encore de mettre l'image au niveau du div dans la propriété css background mais du point de vue référencement c'est un manque à gagner.

Merci à ClaudeLELOUP et à Caro-Line pour leurs relectures attentives.