Border-radius ou dessiner des cercles en CSS

L'astuce est déjà ancienne mais il est peut-être utile de rappeler ce qu'on peut faire depuis un moment déjà avec des navigateurs web modernes et quelques règles CSS : arrondir les coins des bordures d'un élément pour créer des cercles.

La propriété qui permet cela s'appelle border-radius et sera disponible avec les CSS 3e du nom. Elle définit en fait le rayon d'une ellipse qui va dessiner le(s) coin(s) de l'élément auquel elle s'applique.

Prenons le cas d'une div que l'on marque par l'identifiant circle :

<div id="circle"></div>
Élément div simple que l'on va transformer en cercle.

Pour transformer cette div en un cercle de 50 pixels de diamètre, voilà quelles règles css nous aurions à appliquer :

#circle {
    width: 50px;
    height: 50px;
    background-color: #f00;
    border: 1px solid #f00;
    border-radius: 50%;
}
Règles css3 pour obtenir un cercle rouge de 50 pixels de diamètre.

Si on applique uniquement ces règles, nous ne verrons en fait qu'un carré rouge car, à l'heure actuelle et à ma connaissance, aucun navigateur web n'implémente la propriété border-radius.

Ce n'est pas totalement exact : depuis plusieurs années, les développeurs d'Opera, de Firefox ou de Safari ont ajouté dans le moteur de rendu HTML de leur navigateur respectif des propriétés CSS qui simulent des fonctionnalités qui ne sont pas encore « officielles ». Les spécifications CSS le permettent si le nom de ces propriétés est préfixé par le nom du navigateur en question. Cela permet d'offrir des « jouets » supplémentaires aux développeurs web tout en précisant qui ne s'agit pas d'une implémentation définitive.

Dans le cas qui nous occupe ici, ces propriétés internes s'appellent -moz-border-radius pour Firefox (et tout navigateur basé sur le moteur de rendu Gecko) et -webkit-border-radius pour Safari (ou tout navigateur fonctionnant avec le moteur de rendu webkit). Donc, pour obtenir notre cercle rouge de 50 pixels de diamètre, il nous faudra écrire :

#circle {
    width: 50px;
    height: 50px;
    background-color: #f00;
    border: 1px solid #f00;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
Règles css pour obtenir un cercle rouge de 50 pixels de diamètre.

Ce qui donne :

Cercle rouge de 50 pixels de diamètre visible sous Firefox et Safari.

On pourra remarquer que le rendu sous Safari et Firefox 3 est bien meilleur que sous Firefox 2.

Ensuite ? Et bien avec un peu d'imagination et de javascript, on peut faire de biens jolies choses.

Titre
CSS Backgrounds and Borders Module Level 3
Auteurs
Bert BOS
Auteurs
Elika ETEMAD
Auteurs
Brad KEMPER
Editeur
W3C
Date
Chapitre
5.1. The ‘border-radius’ properties