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

sé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 :

Nombre	Description
`1`	Type pour tous les côtés simultanément.
`2`	Première valeur pour le haut et le bas, seconde - pour les bordures gauche et droite.
`3`	Première valeur pour le haut, seconde - pour les bordures gauche et droite, troisième - pour le bas.
`4`	Première valeur pour la bordure supérieure, seconde - pour la droite, troisième - pour la inférieure, quatrième - pour la bordure gauche.

Exemple

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

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

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

Exemple

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

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

#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 :

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

#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 :

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

#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 :

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

#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 :

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

#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 :

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

#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 :

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

#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é :

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

#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

la propriété border-style,
qui définit l'apparence de la bordure
la propriété border-color,
qui définit la couleur de la bordure
la propriété border,
qui est la propriété raccourcie pour la bordure