border-style
Avec la propriété border-style, nous pouvons ajouter des bordures à nos texte. Ce type de bordure n'est pas seulement utilisé pour les tableaux mais peut aussi être ajouter à des paragraphes, division, etc.
Il existe plusieurs style de bordure dont voici une liste :
- dotted: bordure en pointillé.
- dashed: bordure avec des traits.
- solid: bordure solide.
- double: une bordure double.
- groove: 3D profond.
- ridge: 3D en relief.
- inset: Incrustation en 3D.
- outset: Relief en 3D.
Voici ce que ça donne :
Note: vous devez utiliser la propriété border-width avec border-style.
bordure de type dotted
bordure de type dashed
bordure de type solid
bordure de type double
bordure de type groove
bordure de type ridge
bordure de type inset
bordure de type outset
Vous pouvez aussi appliquer un styles différent pour chaque coté de la bordure, pour se faire il suffit d'utiliser la propriété border-style en précisant les différentes valeurs dans cette ordre : haut, droite, bas, gauche. Exemple :
.bordure {
border-width: 5px;
border-style: dotted dashed solid double;
}
Donc ici le bord du haut sera en pointillé, celle de droite en traits, celle du bas en solide, celle de gauche en double.
Résultat
