CSS - Les bordures et les ombres - Bordures arrondies

Les bordures arrondies, c'est un peu le Saint Graal attendu par les webmasters depuis des millénaires (ou presque). Depuis que CSS3 est arrivé, il est enfin possible d'en créer facilement !

La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels :

1 2 3 4

p {     border-radius: 10px; }

L'arrondi se voit notamment si l'élément a des bordures, comme sur la figure suivante.

Des bordures arrondies

… ou s'il a une couleur de fond, comme sur la figure suivante.

Un fond aux coins arrondis

On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs :

1 2 3 4

p {     border-radius: 10px 5px 10px 5px; }

Les valeurs correspondent aux angles suivants dans cet ordre :

1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
4. en bas à gauche.

Enfin, il est possible d'affiner l'arrondi de nos angles en créant des courbes elliptiques figure suivante). Dans ce cas, il faut indiquer deux valeurs séparées par une barre oblique (slash, caractère /). Le mieux est certainement de tester pour voir l'effet :

1 2 3 4

p {     border-radius: 20px / 10px; }

Bordures arrondies elliptiques

Les bordures arrondies fonctionnent avec tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9).

Pour les anciennes versions de Mozilla Firefox, Chrome et Safari, il était nécessaire d'utiliser ce qu'on appelle des « préfixes vendeurs », c'est-à-dire qu'il fallait écrire dans le code CSS différentes versions de la propriété (-moz-border-radius pour Firefox, -webkit-border-radius pour Safari, etc.). Ce n'est heureusement plus nécessaire aujourd'hui, sauf si vous voulez gérer les anciennes versions de ces navigateurs.