Propriété border-width

La propriété border-width définit l'épaisseur de la bordure pour tous les côtés simultanément ou séparément pour chaque côté. C'est une propriété raccourcie pour les propriétés border-left-width, border-right-width, border-top-width, border-bottom-width.

Les valeurs de la propriété sont toutes unités de taille, sauf les pourcentages, ou les mots-clés thin (bordure de 2 pixels), medium (bordure de 4 pixels) ou thick (bordure de 6 pixels). La valeur par défaut : medium.

Syntaxe

csssélecteur {
  border-width: 1, 2, 3 ou 4 valeurs;
}

Nombre de valeurs

La propriété peut prendre 1, 2, 3 ou 4 valeurs, spécifiées avec un espace :

Exemple

Définissons une bordure d'un pixel d'épaisseur :

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons une bordure de 4 pixels d'épaisseur :

html<div id="elem"></div>

css#elem {
  border-width: 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons l'épaisseur des bordures supérieure et inférieure à 1px, et des bordures droite et gauche à 4px :

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons l'épaisseur de la bordure supérieure à 1px, des bordures droite et gauche à 4px, et de la bordure inférieure à 6px :

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px 6px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons l'épaisseur de la bordure supérieure à 1px, de la bordure droite à 4px, de la bordure inférieure à 6px, et de la bordure gauche à 8px :

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px 6px 8px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons l'épaisseur de la bordure avec le mot-clé thin :

html<div id="elem"></div>

css#elem {
  border-width: thin;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons l'épaisseur de la bordure avec le mot-clé medium :

html<div id="elem"></div>

css#elem {
  border-width: medium;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons l'épaisseur de la bordure avec le mot-clé thick :

html<div id="elem"></div>

css#elem {
  border-width: thick;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons des bordures différentes pour chaque côté :

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Voir aussi