Propriété CSS border-radius

La propriété border-radius est utilisée pour créer des coins arrondis sur le bord extérieur d'un élément. Elle fonctionne que l'élément ait ou non une bordure visible, et elle découpe également l'arrière-plan et l'ombre de la boîte selon la forme arrondie. Cette page couvre la syntaxe abrégée, les règles pour une à quatre valeurs, les unités en pourcentage par rapport aux longueurs, la syntaxe elliptique avec la barre oblique, et les cas d'usage courants.

La propriété border-radius est l'une des propriétés CSS3.

Cette propriété est une propriété abrégée pour les propriétés border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius, qui permettent de définir séparément les quatre coins d'un élément. Mais la propriété border-radius peut être utilisée pour définir les quatre coins en même temps. Elle peut accepter de une à quatre valeurs.

Si quatre valeurs sont fournies, elles s'appliquent respectivement aux coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche. Si la valeur du coin inférieur gauche est omise, elle prend par défaut la valeur du coin supérieur droit. Si la valeur du coin inférieur droit est omise, elle prend par défaut la valeur du coin supérieur gauche. Si seulement deux valeurs sont fournies, la première s'applique aux coins supérieur gauche et inférieur droit, et la seconde aux coins supérieur droit et inférieur gauche. Si une seule valeur est fournie, elle s'applique aux quatre coins.

La propriété border-radius est spécifiée de la manière suivante :

une, deux, trois ou quatre valeurs de longueur ou de pourcentage, utilisées pour définir un rayon unique pour les coins.
suivies optionnellement d'une barre oblique ( / ) et d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage. Cela permet de définir un rayon supplémentaire, afin d'obtenir des coins elliptiques.

Le premier ensemble de valeurs (1 à 4) définit le rayon horizontal pour les quatre coins. Un deuxième ensemble optionnel de valeurs, précédé d'une barre oblique, définit les rayons verticaux pour les quatre coins. Si un seul ensemble de valeurs est fourni, ces valeurs seront utilisées de façon égale pour les rayons vertical et horizontal.

Lorsqu'on utilise un pourcentage, il est résolu par rapport à la taille propre de l'élément : le rayon horizontal correspond à un pourcentage de la largeur de la boîte et le rayon vertical à un pourcentage de sa hauteur. C'est pourquoi border-radius: 50% transforme un carré en cercle parfait, tandis que la même valeur sur un rectangle produit une ellipse.

Valeur initiale	0
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non
Animable	Oui. Chacune des propriétés de la forme abrégée est animable.
Version	CSS3
Syntaxe DOM	`object.style.borderRadius = "20px";` (Remarque : JavaScript utilise la notation camelCase `borderRadius`, contrairement au nom de propriété CSS avec tiret.)

Syntaxe

Syntaxe de la propriété CSS border-radius

border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;

Exemple de la propriété border-radius :

Exemple de la propriété CSS border-radius

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        width: 50%;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Résultat

Voir un exemple avec des valeurs en pourcentage et en pixels :

Exemple de la propriété border-radius avec des valeurs en pourcentage et en pixels :

Exemple de la propriété CSS border-radius avec des valeurs en pourcentage et en pixels

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
        height: 40px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-percent {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example with percent and pixel values</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Essayez vous-même »

Une valeur en pixels donne un rayon de coin fixe identique quelle que soit la taille de l'élément, ce qui convient généralement pour les boutons, les cartes et les champs de saisie. Un pourcentage s'adapte à l'élément, de sorte que border-radius: 50% appliqué à un élément carré produit un cercle — une technique courante pour les avatars et les badges.

Vous pouvez également définir border-radius pour un élément avec une couleur d'arrière-plan ou une image d'arrière-plan.

Exemple de la propriété border-radius avec les propriétés background-color et background-image :

Exemple de la propriété CSS border-radius avec les propriétés de couleur et d'image d'arrière-plan

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-bg {
        width: 250px;
        height: 200px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-img {
        width: 250px;
        height: 200px;
        margin-top: 20px;
        background-color: lightgray;
        background: url('https://api.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
        background-position: left top;
        background-repeat: repeat;
        border: 2px solid #1c87c9;
        border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius example with background color</h1>
    <div class="radius-bg"></div>
    <h2> Border-radius example with background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Essayez vous-même »

Remarque : dans les navigateurs plus anciens, les images d'arrière-plan peuvent ne pas être découpées selon les coins arrondis. Utilisez background-clip: border-box; pour garantir un comportement cohérent.

Voyons maintenant un exemple avec différentes boîtes ayant diverses valeurs de border-radius qui forment la forme des boîtes.

Exemple de la propriété border-radius avec plusieurs valeurs :

Exemple de la propriété CSS border-radius avec différentes valeurs (%, px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 250px;
        height: 150px;
        border: solid 3px #1c87c9;
        background: #1c87c9;
      }
      .radius_1 {
        border-radius: 25px;
      }
      .radius_2 {
        border-radius: 25% 10%;
      }
      .radius_3 {
        border-radius: 10% 30% 50% 70%;
      }
      .radius_4 {
        border-radius: 10% / 50%;
      }
      .radius_5 {
        border-radius: 10px 100px / 120px;
      }
      .radius_6 {
        border-radius: 25% 10%;
      }
      .radius_7 {
        border-radius: 50% 20% / 10% 40%;
      }
      .radius_8 {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius examples</h1>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Essayez vous-même »

La syntaxe avec barre oblique (par exemple border-radius: 10px 100px / 120px) sépare les rayons horizontaux des rayons verticaux, ce qui permet de créer des coins asymétriques et elliptiques plutôt que de simples quarts de cercle.

Cas d'usage courants

Boutons et cartes arrondis : une petite valeur fixe telle que border-radius: 6px adoucit les coins sans déformer la forme.
Boutons en forme de pilule : une grande valeur comme border-radius: 9999px arrondit entièrement les côtés courts en capsule.
Cercles et avatars : border-radius: 50% appliqué à un élément carré (largeur et hauteur égales) produit un cercle parfait.
Formes décoratives : quatre valeurs de pourcentage différentes, éventuellement avec la syntaxe /, créent des formes organiques rappelant des feuilles.

Valeurs

Valeur	Description	Essayer
length	Définit la taille d'arrondi des coins.	Essayer »
%	Définit la taille d'arrondi des coins en pourcentage.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite de la valeur de la propriété depuis son élément parent.

Pratique

Que fait la propriété CSS 'border-radius' ?

Elle définit le rayon de la bordure de la page.Elle détermine la couleur d'arrière-plan de la bordure.Elle contrôle la courbure des bordures d'un élément.Elle permet de créer des coins arrondis sur un élément.