border-left-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-left-width définit l'épaisseur de la bordure pour le côté gauche d'un élément.

Exemple interactif

border-left-width: thick;

border-left-width: 2em;

border-left-width: 4px;

border-left-width: 2ex;

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

Valeurs

<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 (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-left-style vaut none ou hidden
Type d'animationune longueur

Syntaxe formelle

border-left-width = 
  <line-width>  

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

Exemples

CSS

css
.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;
}

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