border-right-width

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La propriété border-right-width définit l'épaisseur de la bordure pour le côté droit d'une boîte.

Exemple interactif

border-right-width: thick;

border-right-width: 2em;

border-right-width: 4px;

border-right-width: 2ex;

border-right-width: 0;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: #000;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Une valeur de longueur (<length>) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :

thin (fin)
medium (intermédiaire)
thick (épais)

La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée thin ≤ medium ≤ thick et que ces valeurs soient constantes pour un même document.

Définition formelle

Valeur initiale	`medium`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter`.
Héritée	non
Valeur calculée	la longueur absolue ou `0` si `border-right-style` vaut `none` ou `hidden`
Type d'animation	une longueur

Syntaxe formelle

border-right-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

Exemples

CSS

css

.element1 {
  border-right: thick solid red;
}
.element2 {
  border-right: medium solid orange;
}
.element3 {
  border-right: thin solid green;
}

HTML

html

<p class="element1">Une bordure épaisse rouge.</p>

<p class="element2">Une bordure moyenne orange.</p>

<p class="element3">Et une bordure fine verte.</p>

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

Les autres propriétés liées à la largeur de la bordure :
Les autres propriétés CSS liées à la bordure du côté droit :

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨24 juin 2025⁩ par les contributeurs du MDN.

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