documentation css border-style

Version CSS : 1 (&2)

• S’applique à : Tous les éléments.
• Valeur héritée : Non
• Valeur par défaut : none

Permet de définir le type des bordures d’un élément. Le style ne peut être appliqué que si l’épaisseur de bordure (border-width) a été définie, sans quoi la bordure est inexistante.

Attribution des styles aux bordures de l’élément lorsque plusieurs types sont définies (depuis CSS2 uniquement et donc non reconnu par les anciens navigateurs) :

• si 2 valeurs : premier style pour les côtés haut et bas, second pour droite et gauche.
• si 3 valeurs : premier style pour le côté haut, second pour droite et gauche, troisième pour bas.
• si 4 valeurs : les quatres style sont respectivement attribuées aux cotés haut, droit, bas, et gauche.

toutes les valeurs ne sont pas prises en compte selon les navigateurs

• solid : trait plein
• dashed : tirets
• dotted : pointillés
• double : double traits pleins, la largeur définie par “border-width” correspondra à la taille des 2 traits et de l’espaces entre ceux-ci
• groove : gravée dans la page, opposé de ridge
• ridge : effet 3D opposé de groove, sort de la page
• inset : rentrante, inverse de outset, élément incrusté dans la page
• outset : sortante, inverse de inset, élément extrudé de la page
• hidden : pas de bordure, influe sur la bordure mitoyenne
• none : pas de bordure, équivaut à border-width:0

Les styles de chaques côtés peuvent également être définis individuellement à l’aide des propriétés “border-bottom-style”, “border-top-style”, “border-right-style” et “border-left-style”.

Exemple de script

.borduresolid {
  border-style: solid;
}
 
.borduredashed {
  border-style: dashed;
}
 
.borduredotted {
  border-style: dotted;
}
 
.borduredouble {
  border-style: double;
}
 
.borduregroove {
  border-style: groove;
}
 
.bordureridge {
  border-style: ridge;
}
 
.bordureinset {
  border-style: inset;
}
 
.bordureoutset {
  border-style: outset;
}
 
.bordurehidden {
  border-style: hidden;
}
 
.bordurehidden {
  border-style: hidden;
}