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

csssé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

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

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

Результат:

Exemple . Valeur dotted

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

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

Результат:

Exemple . Valeur dashed

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

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

Результат:

Exemple . Valeur ridge

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

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

Результат:

Exemple . Valeur double

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

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

Результат:

Exemple . Valeur groove

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

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

Результат:

Exemple . Valeur inset

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

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

Результат:

Exemple . Valeur outset

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

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

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

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

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

Результат:

Exemple

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

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

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