Border-radius ou dessiner des cercles en CSS

La propriété qui permet cela s'appelle border-radius et sera disponible avec les CSS 3^e 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 :

/// <div class="cadre"> <div id="circle"></div> </div> ///

Cercle rouge de 50 pixels de diamètre.

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
chapter: 5.1. The ‘border-radius’ properties
Éditeur: W3C
Date: décembre 2009