La propriété CSSborder-width est unepropriété raccourcie qui définit la largeur de la bordure d'un élément.

Cette propriété raccourcie définit les propriétés détaillées

• border-top-width,
• border-right-width,
• border-bottom-width
• border-left-width.

Si on utilise les propriétés logiques, elle définitborder-block-start-width,border-block-end-width,border-inline-start-width etborder-inline-end-width.

Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcieborder.

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

/* Valeurs avec un mot-clé */border-width: thin;border-width: medium;border-width: thick;/* Une largeur pour chaque côté *//* Valeur de type <length> */border-width: 5px;/* côtés haut et bas | côtés gauche et droit */border-width: 2px 1.5em;/* côté haut | côtés gauche et droit | côté 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: unset;

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

• Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
• Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
• Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
• Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).

Valeurs

<line-width>

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

• thin (fin)
• medium (intermédiaire)
• thick (épais)

La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante :thin ≤ medium ≤ thick et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.

Définition formelle

Syntaxe formelle

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

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

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

Exemples

HTML

<p>Une valeur : la bordure fait 6px sur les 4 côtés.</p><p>  Deux valeurs différentes : elle fait 2px en haut et en bas et elle mesure 10px  pour les bords droit et gauche.</p><p>  Trois valeurs différentes : 0.3em pour le haut, 9px pour le bas et zéro pour  la droite et la gauche.</p><p>  Quatre valeurs différentes : "thin" pour le haut, "medium" pour la droite,  "thick" pour le bas et 1em pour la gauche.</p>

CSS

#unevaleur {  border: ridge #ccc;  border-width: 6px;}#deuxvaleurs {  border: solid red;  border-width: 2px 10px;}#troisvaleurs {  border: dotted orange;  border-width: 0.3em 0 9px;}#quatrevaleurs {  border: solid lightgreen;  border-width: thin medium thick 1em;}p {  width: auto;  margin: 0.25em;  padding: 0.25em;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés raccourcies liées aux bordures

  • border,
  • border-style
  • border-color

• Les propriétés liées à la largeur des bordures

  • border-bottom-width,
  • border-left-width,
  • border-right-width,
  • border-top-width