border-right-width

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

Syntaxe

css
/* Valeurs avec un mot-clé */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* Valeurs de longueurs */ /* Type <length> */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* Valeurs globales */ border-right-width: inherit; border-right-width: initial; border-right-width: unset;

Valeurs

<br-width>

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 initialemedium
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Valeur calculéela longueur absolue ou 0 si border-right-style vaut none ou hidden
Type d'animationune 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
# the-border-width

Compatibilité des navigateurs

Voir aussi