Propriété border-style

La propriété border-style définit le style de 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 suivantes : border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaxe

sélecteur {
	border-style: valeur;
}

Valeurs

Valeur	Description
`solid`	Ligne continue.
`dotted`	Bordure en pointillés.
`dashed`	Bordure en tirets.
`ridge`	Bordure en relief (saillant).
`double`	Bordure double. Pour voir l'effet, l'épaisseur de la bordure doit être d'au moins `3px`.
`groove`	Bordure en creux.
`inset`	Bordure enfoncée (intérieure).
`outset`	Bordure en relief (extérieure).
`none`	Aucune bordure.

Valeur par défaut : none.

Nombre de valeurs

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

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

Exemple . Valeur solid

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

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

Exemple . Valeur dotted

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

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

Exemple . Valeur dashed

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

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

Exemple . Valeur ridge

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

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

Exemple . Valeur double

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

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

Exemple . Valeur groove

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

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

Exemple . Valeur inset

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

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

Exemple . Valeur outset

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

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

Exemple

Dans cet exemple, différents types de bordure sont définis pour les différents côtés de l'élément :

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

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

Exemple

Et maintenant, pour les différents côtés de l'élément, une épaisseur de bordure et une couleur différentes sont également définies :

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

Exemple

Maintenant, pour les bordures supérieure et inférieure, le type solid est défini, et pour les bordures droite et gauche - dotted :

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

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

Voir aussi

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