I. 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

 
Sélectionnez

<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>
			

II. 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

 
Sélectionnez

<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>
			

III. D'autres exemples

IV. Conclusion

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.

V. Remerciements

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