border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété CSS 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.

Exemple interactif

La courbure de la bordure 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.

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

Note : Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple border-radius: 0 0 inherit inherit pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.

Propriétés détaillées correspondantes

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

Syntaxe

css

/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
/* Avec une valeur, 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 à droite 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 / 20px;

/* rayons horizontaux puis / puis rayons verticaux */
/* 1. coin en haut à gauche et en bas à droite      */
/* 2. puis coin en haut à droite 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;

/* Valeurs globales */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: unset;

La propriété border-radius peut être définie avec :

Une, deux, trois voire quatre valeurs de longueur (<length>) ou de pourcentages (<percentage>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle ;
Puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.

Valeurs

Une seule valeur		Une valeur de longueur (type `length`) ou un pourcentage (type `percentage`) qui indique le rayon de courbure à utiliser pour chaque coin. Cette forme est uniquement utilisée lorsque la déclaration contient une seule valeur.
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 pour 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 pour 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 pour 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 pour la syntaxe avec quatre valeurs.

<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. 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 :

css

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;

css

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;

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Applicabilité	tous les éléments, mais les agents utilisateurs ne sont pas tenus de l'appliquer aux éléments de type `table` ou `inline-table` lorsque `border-collapse` vaut `collapse`. Le comportement sur les éléments de type table interne est pour l'instant indéfini.. S'applique aussi à `::first-letter`.
Héritée	non
Pourcentages	se rapporte à la dimension correspondance de la boîte de bordure
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `border-bottom-left-radius`: deux `longueurs` absolues ou deux `pourcentages` `border-bottom-right-radius`: deux `longueurs` absolues ou deux `pourcentages` `border-top-left-radius`: deux `longueurs` absolues ou deux `pourcentages` `border-top-right-radius`: deux `longueurs` absolues ou deux `pourcentages`
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `border-top-left-radius`: une longueur, pourcentage ou calc() ; `border-top-right-radius`: une longueur, pourcentage ou calc() ; `border-bottom-right-radius`: une longueur, pourcentage ou calc() ; `border-bottom-left-radius`: une longueur, pourcentage ou calc() ;

Syntaxe formelle

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>
<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>
<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
</pre>
<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>
<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>
<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>
<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

Détail des fragments

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Les propriétés CSS relatives à border-radius :
- Les propriétés physiques :
- Les propriétés logiques :