border-right-width

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

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

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

<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		Une bordure fine.
medium		Une bordure moyenne.
thick		Une bordure épaisse.

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.

<line-width>
où 
<line-width> = <length> | thin | medium | thick

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

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

• Les autres propriétés liées à la largeur de la bordure :
  • border-left-width,
  • border-top-width,
  • border-bottom-width,
  • border-width
• Les autres propriétés CSS liées à la bordure du côté droit :
  • border,
  • border-right,
  • border-right-style,
  • border-right-color.