Propriété CSS border-right-width

La propriété CSS border-right-width définit la largeur (épaisseur) de la bordure droite d'un élément uniquement. Elle ne contrôle qu'un seul côté, ce qui la rend utile lorsque vous souhaitez une bordure asymétrique — par exemple, une ligne d'accentuation épaisse à droite d'une barre latérale ou d'une citation mise en exergue, tandis que les trois autres côtés restent fins ou absents.

Vous pouvez également définir la largeur de la bordure droite via les propriétés raccourcies border ou border-width. Utilisez border-right-width lorsque vous avez spécifiquement besoin de remplacer ou d'ajuster un seul côté sans toucher aux autres.

Pourquoi un style de bordure est requis en premier

Une bordure n'a pas de largeur visible si elle n'a pas également un style. Si vous définissez border-right-width mais laissez le style de la bordure droite à sa valeur par défaut (none), rien ne s'affiche — une bordure none se réduit à zéro quelle que soit la largeur demandée. Déclarez donc toujours un style en premier, en utilisant border-right-style, border-style, ou le raccourci border. Pour définir également la couleur, consultez border-right-color.

/* Width alone does nothing — there is no style to give it a width. */
.broken {
  border-right-width: 8px;
}

/* Style + width — now the 8px right border is visible. */
.works {
  border-right-style: solid;
  border-right-width: 8px;
}

Info

La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. Cependant, ils suivent toujours cet ordre : thin ≤ medium ≤ thick.

Info

La spécification ne définit pas comment les bordures de largeurs et de styles différents se rejoignent dans les coins.

Valeur initiale	medium
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Héritage	Non
Animatable	Oui. La largeur de la bordure est animatable.
Version	CSS1
Syntaxe DOM	object.style.borderRightWidth = "5px";

Syntaxe

Syntaxe de la propriété CSS border-right-width

border-right-width: medium | thin | thick | length | initial | inherit;

Exemple de la propriété border-right-width :

Exemple de la propriété CSS border-right-width avec la valeur thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        width: 50%;
        border-style: dotted;
        border-right-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-right-width example</h2>
    <p>As you can see the width of the right border is set to thick.</p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété border-right-width avec toutes les valeurs :

Exemple de la propriété CSS border-right-width avec les valeurs medium, thin, thick, px, initial et inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-right-width example classes */
      .b1 {
        border-right-width: medium;
      }
      .b2 {
        border-right-width: thin;
      }
      .b3 {
        border-right-width: thick;
      }
      .b4 {
        border-right-width: 10px;
      }
      .b5 {
        border-right-width: initial;
      }
      .b6 {
        border-right-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-right-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS border-right-width](/uploads/media/default/0001/03/ed2548511ad8d4ee5076d931f7bb68eeb452cec5.png "Propriété CSS border-right-width" =420x)

Valeurs

Valeur	Description	Essayer
medium	Définit une bordure droite de taille moyenne. C'est la valeur par défaut de cette propriété.	Essayer »
thin	Définit une bordure droite fine. C'est le navigateur qui détermine la largeur exacte.	Essayer »
thick	Définit une bordure droite épaisse. C'est le navigateur qui détermine la largeur exacte.	Essayer »
length	Définit l'épaisseur de la bordure droite sous la forme d'une longueur explicite. Par exemple, 10px, 5em, 8pt, etc. Les valeurs négatives ne sont pas autorisées.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété de son élément parent.

Propriétés associées

border-right-style — obligatoire avant que la largeur soit visible.
border-right-color — définit la couleur de la bordure droite.
border-right — raccourci pour la largeur, le style et la couleur de la bordure droite.
border-width — définit la largeur des quatre côtés à la fois.
border-left-width, border-top-width, border-bottom-width — les autres propriétés de largeur par côté.

Exercice

Pratique

Que spécifie la propriété CSS 'border-right-width' ?

Elle spécifie la couleur de la bordure droite.Elle spécifie la largeur de la bordure droite.Elle spécifie le style de la bordure droite.Elle spécifie la taille de la marge droite.