border-width

La propriété CSS border-width est une proprié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éfinit border-block-start-width, border-block-end-width, border-inline-start-width et border-inline-end-width.

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

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-width: thin;
border-width: medium;
border-width: thick;

/* Une largeur pour chaque côté */
/* Valeur de type <length> */
border-width: 5px;

/* largeur verticale puis horizontale */
border-width: 2px 1.5em;

/* haut | largeur horizontale | 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).

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

 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.

<line-width>{1,4}
où 
<line-width> = <length> | thin | medium | thick

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

<p id="deuxvaleurs">
  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="troisvaleurs">
  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="quatrevaleurs">
  Quatre valeurs différentes : "thin" pour le haut,
  "medium" pour la droite, "thick" pour le bas
  et 1em pour la gauche.
</p>

#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;
}

• 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