Arrondir les angles en CSS

Pour ceux d'entre vous qui conservent encore en mémoire les navigateurs Internet Explorer 5.0 ou Netscape 4.7, voire les toutes premières versions d'Opera, la création d'une box aux angles arrondis passait immanquablement par l'intégration d'images entrainant une multiplication des hits susceptible de provoquer un Deny de Service dans le cadre d'un site à très forte audience.

Avec Internet Explorer 7.0 et 8.0 ou Firefox et consorts, la création de box aux coins arrondis gagne en efficacité grâce à la spécification CSS2 et à la technique dite du sprite CSS mais malgré tout, l'usage d'une image reste nécessaire pour atteindre l'effet attendu.

Avec  la spécification CSS3 apparait enfin la propriété border-radius permettant d'arrondir les angles sans recourir au javascript ou à la moindre image. Implémentée dans un premier temps de manière expérimentale par les éditeurs de navigateurs, il convenait alors d'ajouter des préfixes "propriétaires" pour que l'attribut soit pris en considération (exemples : -moz- pour Firefox, -webkit- pour Chrome et Safari). Enfin, en 2011 avec l'avènement d'Internet Explorer 9 et les mises à jour successives des autres navigateurs, la propriété border-radius a été généralisée.

La propriété border-radius en détail

Border-radius est le raccourci dans l'ordre très exact des propriétés :

1. border-top-left-radius ... [1. coin supérieur gauche]
2. border-top-right-radius ... [2. coin supérieur droit]
3. border-bottom-right-radius ... [3. coin inférieur droit]
4. border-bottom-left-radius ... [4. coin inférieur gauche]

La valeur initiale par défaut est 0 (zéro).
La ou les valeurs numériques peuvent être définies en pixels (px), en pourcentages (%), en points (pt) ou en cadratins (em).

• Si une seule valeur est renseignée dans la propriété border-radius, celle-ci s'applique aux 4 angles.
• Si deux valeurs sont renseignées, la première s'applique aux angles supérieur gauche et inférieur droit tandis que la seconde valeur s'applique aux angles supérieur droit et inférieur gauche.
• Si trois valeurs sont renseignées, la première s'applique au coin supérieur gauche, la seconde aux angles supérieur droit et inférieur gauche et la dernière à l'angle inférieur droit.
• Si quatre valeurs sont renseignés, celles-ci s'appliquent selon l'ordre précédemment exposé.

Il convient de souligner que les rayons verticaux et horizontaux peuvent être individuellement différenciés ce qui permet d'obtenir des angles arrondis de type elliptique de diamètre varié.

Chaque angle peut être également individuellement animé.

Pour en finir avec le détail, il convient de retenir que la propriété ne supporte pas l'héritage (inherit).

Quelques exemples de mise en forme

border-radius:50%;

border-radius:.5em;

border-radius:20px 5px;

border-radius:8pt 3pt 0;

border-radius:0 0 20% 20%/0 0 50% 50%;