border-left-width

La propriété border-left-width définit l'épaisseur de la bordure pour le côté gauche d'un élément.

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 !

/* Une valeur de longueur */
/* Type <length>          */
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/* Valeurs avec un mot-clé */
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/* Valeurs globales */
border-left-width: inherit;
border-left-width: initial;
border-left-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é gauche 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-left-width: thick;
  border-left-style: solid;
  border-left-color: red;
}
.element2{
  border-left-width: medium;
  border-left-style: solid;
  border-left-color: orange;
}
.element3{
  border-left-width: thin;
  border-left-style: solid;
  border-left-color: 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-right-width,
  • border-top-width,
  • border-bottom-width,
  • border-width
• Les autres propriétés CSS liées à la bordure du côté gauche :
  • border,
  • border-left,
  • border-left-style,
  • border-left-color.