border-radius - CSS

Exemple interactif

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec des coins arrondis.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

Syntaxe

css

/* La syntaxe du premier rayon accepte de une à quatre valeurs */
/* Le rayon est appliqué aux 4 côtés */
border-radius: 10px;

/* haut gauche et bas droite | haut droite et bas gauche */
border-radius: 10px 5%;

/* haut gauche | haut droite et bas gauche | bas droite */
border-radius: 2px 4px 2px;

/* haut gauche | haut droite | bas droite | bas gauche */
border-radius: 1px 0 3px 4px;

/* La syntaxe du second rayon accepte de une à quatre valeurs */
/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
border-radius: 10px / 20px;

/* rayons horizontaux puis / haut gauche et bas droite | haut droite et bas gauche */
border-radius: 10px 5% / 20px 30px;

/* rayons horizontaux puis / haut gauche | haut droite et bas gauche | bas droite */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* rayons horizontaux puis / haut gauche | haut droite | bas droite | bas gauche */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Valeurs globales */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
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 d'une barre oblique « / » suivie d'une, deux, trois ou quatre valeurs <length> ou <percentage>. Cela permet de définir un rayon supplémentaire pour obtenir des coins elliptiques.

Valeurs

Un rectangle bleu clair avec une bordure grise claire. Les 4 coins sont arrondis.

Un rectangle bleu clair avec une bordure grise claire. Les coins en haut à gauche et en bas à droite sont arrondis.

<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;

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.

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

Comparer les styles de bordure

L'exemple suivant contient sept éléments HTML <pre>, chacun illustrant des combinaisons de styles border et border-radius. Les styles appliqués à chaque élément <pre> sont inclus dans le contenu de l'élément, afin que vous puissiez voir les déclarations CSS nécessaires pour créer le style de bordure associé :

<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;
}

Utiliser `corner-shape` avec `border-radius`

Lorsqu'une valeur de border-radius différente de 0 est appliquée à un coin d'une boîte, vous pouvez utiliser la propriété corner-shape (ou l'une de ses formes longues et raccourcies) pour appliquer des formes personnalisées à ce coin, comme un biseau, une encoche ou une superellipse. Cet exemple montre l'utilisation de corner-shape.

HTML

The markup for this example contains a single <div> element.

html

<div></div>

CSS

Nous appliquons à la boîte quelques styles de base, qui sont masqués ici pour plus de clarté. Nous appliquons aussi un box-shadow, un border-radius de 0 20% 50px 30% et un corner-shape de superellipse(0.5) bevel notch squircle.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 0 20% 50px 30%;
  corner-shape: superellipse(0.5) bevel notch squircle;
}

Résultat

Le résultat affiché ressemble à ceci :

Remarquez qu'aucune forme de coin n'est appliquée au coin supérieur gauche, car il a une valeur de border-radius à 0.

Spécifications

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

Compatibilité des navigateurs

Voir aussi

Les propriétés CSS relatives à border-radius : border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 1 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content

Tous les côtés		Une valeur de longueur (`<length>`) ou de pourcentages (`<percentage>`) qui indique le rayon de courbure à utiliser pour chaque coin de la bordure. Cette forme est uniquement utilisée lorsque la déclaration contient une seule valeur.
Haut gauche et Bas droite		Une valeur de longueur (`<length>`) ou de pourcentages (`<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. Cette forme est uniquement utilisée avec la syntaxe à deux valeurs.
Haut droite et Bas gauche		Une valeur de longueur (`<length>`) ou de pourcentages (`<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. Cette forme est utilisée avec les syntaxes à deux ou trois valeurs.
Haut gauche		Une valeur de longueur (`<length>`) ou de pourcentages (`<percentage>`) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette forme est utilisée avec les syntaxes à trois ou quatre valeurs.
Haut droite		Une valeur de longueur (`<length>`) ou de pourcentages (`<percentage>`) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette forme est utilisée avec la syntaxe à quatre valeurs.
Bas droite		Une valeur de longueur (`<length>`) ou de pourcentages (`<percentage>`) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette forme est utilisée avec les syntaxes à trois ou quatre valeurs.
Bas gauche		Une valeur de longueur (`<length>`) ou de pourcentages (`<percentage>`) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette forme est utilisée avec la syntaxe à quatre valeurs.