border-radius

La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.

La courbure s'applique à l'arrière-plan (défini avec la propriété background) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par background-clip.

Cette propriété est une propriété raccourcie qui permet de définir :

• border-top-left-radius,
• border-top-right-radius,
• border-bottom-right-radius,
• border-bottom-left-radius.

La propriété border-radius ne s'applique pas aux tableaux lorsque border-collapse vaut collapse.

Syntaxe

/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
/* On utilise le même rayon pour les quatre angles */
border-radius: 10px;

/* 1. coin en haut à gauche et en bas à droite     */
/* 2. puis coin en haut à droit et en bas à gauche */
border-radius: 10px 5%;

/* 1. coin en haut à gauche                    */
/* 2. coin en haut à droite et en bas à gauche */
/* 3. coin en bas à droite                     */
border-radius: 2px 4px 2px;

/* 1. coin en haut à gauche */
/* 2. coin en haut à droite */
/* 3. coin en bas à droite  */
/* 4. coin en bas à gauche  */ 
border-radius: 1px 0 3px 4px;

/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */
/* On sépare les rayons horizontaux des verticaux par une barre oblique    */
/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
border-radius: 10px 5% / 20px;

/* rayons horizontaux puis / puis rayons verticaux */
/* 1. coin en haut à gauche et en bas à droite     */
/* 2. puis coin en haut à droit et en bas à gauche */ 
border-radius: 10px 5% / 20px 30px;

/* rayons horizontaux puis / puis rayons verticaux */
/* 1. coin en haut à gauche                        */
/* 2. coin en haut à droite et en bas à gauche     */
/* 3. coin en bas à droite                         */ 
border-radius: 10px 5px 2em / 20px 25px 30%;

/* rayons horizontaux puis / puis rayons verticaux */ 
/* 1. coin en haut à gauche                        */
/* 2. coin en haut à droite                        */
/* 3. coin en bas à droite                         */
/* 4. coin en bas à gauche                         */ 
border-radius: 10px 5% / 20px 25em 30px 35em;

border-radius: inherit;

Valeurs

Une seule valeur		Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.
Deux valeurs (coin en haut à gauche et en bas à droite)		Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.
Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)		Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.
Coin en haut à gauche		Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en haut à droite		Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
Coin en bas à droite		Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en bas à gauche		Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
inherit		Un mot-clé qui indique que les quatre valeurs sont héritées à partir des valeurs calculées de l'élément parent.

<length>

Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de <length>. Les valeurs négatives sont considérées comme invalides.

<percentage>

Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides.

Ainsi :

border-radius: 1em/5em;

/* est équivalent à */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* est équivalent à : */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Syntaxe formelle

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?
où 
<length-percentage> = <length> | <percentage>

Exemples

CSS

div {
  height: 100px;
  width: 200px;
  border-style: solid;
  border-color: black;
  background-color: palegreen;
}

.arrondi_droit {
  border-radius: 10px 40px 40px 10px;
}

.ellipse {
  border-radius: 50%;
}

.slash {
  border-radius: 13em/3em;
}

HTML

<div class="arrondi_droit"></div>

<div class="ellipse"></div>

<div class="slash"></div>

Résultat

Spécifications

Compatibilité des navigateurs

[1] À partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) -moz-border-radius a été renommée en border-radius; -moz-border-radius fut supportée comme un alias jusqu'à Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9). Afin de respecter le standard CSS3, Gecko 2.0 a modifié la gestion des valeurs <percentage> pour qu'elle corresponde à la spécification. On peut ainsi définir une bordure elliptique sur un élément de taille arbitraire avec border-radius: 50%;. Gecko 2.0 permet également de rogner le contenu et les images avec des angles arrondis (si overflow: visible n'est pas défini).

La prise en charge de la version préfixée (-moz-border-radius) a été retirée avec Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

[2] Les valeurs de type <percentage> ne sont pas prises en charge par les anciennes versions de Chrome et Safari (cela a été corrigé en septembre 2010).

[3] L'implémentation des valeurs de type <percentage> était problématique dans Opera avant la version 11.50.

[4] Les valeurs de type <percentage> ne sont pas prises en charge pour iOS avant la version 5 et pour Android avant WebKit 532.

[5] Les valeurs de type <percentage> sont implémentées de façon non-standard avant Gecko 2.0. En effet, les rayons de courbure horizontaux et verticaux étaient proportionnels à la largeur de la boîte de bordure.

[6] Dans les versions de Safari et Chrome avant WebKit 532.5 seule la forme avec une valeur pour les quatre coins était prise en charge. Pour spécifier différents rayons de courbures il fallait utiliser les propriétés détaillées comme border-top-left-radius.

[7] Dans les versions de Safari et Chrome avant WebKit 532.5, la notation avec la barre oblique / n'était pas prise en charge. Si deux valeurs étaient définies, une bordure elliptique était dessinée sur les quatre angles. -webkit-border-radius: 40px 10px; est ainsi équivalent à border-radius: 40px/10px;.

[8] Pour Opera dans les versions antérieures à la version 11.60, l'application de border-radius sur les éléments remplacés n'entraînaient pas de coins arrondis.

[9] Les versions actuelles de Chrome et Safari ignorent border-radius sur les éléments <select> sauf si -webkit-appearance est surchargée avec une valeur appropriée.

[10] Avant Gecko 50 (Firefox 50.0 / Thunderbird 50.0 / SeaMonkey 2.47), les styles de bordure pour les coins arrondis (avec border-radius) étaient toujours affichés comme si border-top-style avait la valeur solid. Cela a été corrigé avec Gecko 50.
En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

• Les propriétés liées à la courbure de la bordure
  • border-top-left-radius,
  • border-top-right-radius,
  • border-bottom-right-radius,
  • border-bottom-left-radius.