border-style

La propriété border-style est une propriété raccourcie qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément. Cette propriété est une propriété raccourcie pour définir les propriétés détaillées border-top-style, border-right-style, border-bottom-style et border-left-style.

Les valeurs acceptées par cette propriété sont représentées par dix mots-clés :

• none L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de border-width sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée. C'est la valeur par défaut.
  border-style: none;
  
  
  
• hidden L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de border-width sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
  border-style: hidden;
  
  
  
• dotted Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de border-width.
  border-style: dotted;
  
  
  
• dashed Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
  border-style: dashed;
  
  
  
• solid Affiche une ligne droite continue.
  border-style: solid;
  
  
  
• double Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par border-width.
  border-style: double;
  
  
  
• groove La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
  border-style: groove;
  
  
  
• ridge La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
  border-style: ridge;
  
  
  
• inset La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset).
  border-style: inset;
  
  
  
• outset La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset).
  border-style: outset;
  
  
  

Le style peut également s'exprimer avec 2, 3 ou 4 valeurs :

• Deux valeurs La première valeur représente les bords haut et bas de la bordure, la deuxième valeur représente le style apporté aux bords droit et gauche de la bordure.
  border-style: dotted double;
  
  
  
• Trois valeurs La première valeur représente le bord supérieur de la bordure, la deuxième valeur représente le style apporté aux bords droit et gauche de la bordure et la troisième valeur représente le bord du bas.
  border-style: dotted double dashed;
  
  
  
• Quatre valeurs Chaque valeur représente respectivement le bord supérieur, le bord droit, le bord du bas et le bord gauche de la bordure.
  border-style: dotted dashed hidden groove;