Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété border-style

Description.

La propriété border-style définit le type de trait utilisé pour les bordures d'un élément (simple, double, pointillé, etc).

La propriété border-style accepte de une à quatre valeurs:

  • Si une seule valeur est précisée, elle s'applique aux quatre côtés.
  • Si deux valeurs sont précisées, la première définit le type de bordure en haut et en bas ; la deuxième des bordures gauche et droite.
  • Si trois valeurs sont indiquées, la première définit le type de bordure en haut, la deuxième celui des bordures droite et gauche et la dernière le type de la bordure du bas.
  • Enfin, lorsque les quatre valeurs sont indiquées, elles correspondent respectivement aux types des bordures haut, droite, bas et gauche.

Pour une présentation générale des bordures en CSS, voir la propriété raccourcie border.

Syntaxes pour border-style.

  • border-style: none;
    Valeur par défaut. Pas de bordure.
  • border-style: hidden;
    La bordure est invisible mais son épaisseur est comptée.
  • border-style: solid;
    Un trait plein.
  • border-style: double;
    Un trait double.
  • border-style: dotted;
    Un trait en pointillé (points).
  • border-style: dashed;
    Un trait en pointillé (tirets).
  • border-style: groove;
    Un trait avec effet 3D : rainure.
  • border-style: ridge;
    Un trait avec effet 3D : bourrelet.
  • border-style: inset;
    Un trait avec effet 3D : l'élément parait en creux.
  • border-style: outset;
    Un trait avec effet 3D : l'élément parait en relief.
  • border-style: dotted double;
    Deux valeurs séparées par un espace. La première s'applique aux traits du haut et du bas, et la deuxième aux traits de droite et de gauche.
  • border-style: dotted double dashed;
    Trois valeurs séparées par un espace. La première s'applique au trait du haut, la deuxième aux traits de droite et de gauche, et la dernière au trait du bas.
  • border-style: dotted double dashed solid;
    Enfin, avec quatre valeurs séparées par un espace, on tourne dans le sens des aiguilles d'une montre en partant de la bordure du haut.
  • border-style: inherit | initial | unset;

    Reportez-vous à la description de ces valeurs universelles.

Remarques :

  • Pour les valeurs avec effet 3D : double, groove, ridge, inset et outset, l'épaisseur doit être au moins de 2 pixels pour que l'effet soit visible. Une épaisseur de 3 pixels est même conseillée pour un rendu plus esthétique.
  • Pour les styles avec effet 3D, les couleurs trop claires ou trop foncées (blanc, noir) dégradent l'effet : choisissez une couleur intermédiaire (gris par exemple).

Simulateur.

Le simulateur utilise une bordure de 3 pixels et une couleur de luminosité moyenne, ce qui permet de bien visualiser les effets 3D.

border-style :

Prise en charge par les navigateurs.

La propriété border-style est correctement prise en charge par tous les navigateurs actuels.

Voir aussi...

Bordures - Propriétés.