Propriété CSS `border-width`

Baseline Large disponibilité

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é raccourcie CSS border-width permet de définir l'épaisseur de la bordure d'un élément.

Exemple interactif

border-width: thick;

border-width: 1em;

border-width: 4px 1.25em;

border-width: 2ex 1.25ex 0.5ex;

border-width: 0 4px 8px 12px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec une bordure autour.
  </div>
</section>

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

Syntaxe

css

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

/* Valeur de type <length> */
border-width: 5px;

/* haut et bas | gauche et droite */
border-width: 2px 1.5em;

/* haut | gauche et droite | bas */
border-width: 1px 2em 1.5cm;

/* haut | droite | bas | gauche */
border-width: 1px 2em 0 4rem;

/* Valeurs globales */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;

La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.

Lorsqu'une valeur est fournie, elle s'applique comme largeur à tous les côtés.
Lorsque deux valeurs sont fournies, la première largeur s'applique au haut et au bas, la seconde à la gauche et à la droite.
Lorsque trois valeurs sont fournies, la première largeur s'applique au haut, la deuxième à la gauche et à la droite, la troisième au bas.
Lorsque quatre valeurs sont fournies, les largeurs s'appliquent au haut, à la droite, au bas et à la gauche dans cet ordre (sens des aiguilles d'une montre).

Valeurs

<line-width>

Une valeur de longueur (<length>) ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :

thin (fin)
- Identique à 1px.
medium (intermédiaire)
- Identique à 3px.
thick (épais)
- Identique à 5px.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter`.
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `border-top-width`: la longueur absolue ou `0` si `border-top-style` vaut `none` ou `hidden` `border-right-width`: la longueur absolue ou `0` si `border-right-style` vaut `none` ou `hidden` `border-bottom-width`: la longueur absolue ou `0` si `border-bottom-style` vaut `none` ou `hidden` `border-left-width`: la longueur absolue ou `0` si `border-left-style` vaut `none` ou `hidden`
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `border-top-width`: une longueur `border-right-width`: une longueur `border-bottom-width`: une longueur `border-left-width`: une longueur

Syntaxe formelle

border-width = 
  <'border-top-width'>{1,4}  

<border-top-width> = 
  <line-width>  

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

Exemples

Mélange de valeurs et de longueurs

HTML

html

<p id="une-valeur">Une valeur : la bordure fait 6px sur les 4 côtés.</p>

<p id="deux-valeurs">
  Deux valeurs différentes : elle fait 2px en haut et en bas et elle mesure 10px
  pour les bords droit et gauche.
</p>

<p id="trois-valeurs">
  Trois valeurs différentes : 0.3em pour le haut, 9px pour le bas et zéro pour
  la droite et la gauche.
</p>

<p id="quatre-valeurs">
  Quatre valeurs différentes : "thin" pour le haut, "medium" pour la droite,
  "thick" pour le bas et 1em pour la gauche.
</p>

CSS

css

#une-valeur {
  border: ridge #cccccc;
  border-width: 6px;
}

#deux-valeurs {
  border: solid red;
  border-width: 2px 10px;
}

#trois-valeurs {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}

#quatre-valeurs {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}

p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}