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