Bordures

Ce cours va détailler toutes les propriétés CSS permettant d’ajouter une bordure à un élément HTML, de modifier le type de bordure, d’en modifier l’épaisseur, la couleur, etc.

Le style de bordure

Avant toute chose, il faut préciser quel style de bordure appliquer à l’élément HTML en question. Pour cela, la propriété border-style doit être utilisée.

Cette propriété peut recevoir les valeurs suivantes :

• dotted : Définit une bordure avec des points
• dashed : Définit une bordure avec des pointillés
• solid : Définit une bordure dite solide (avec des traits pleins)
• double : Définit une double bordure
• groove : Définit une bordure rainurée en 3D
• ridge : Définit une bordure striée en 3D
• inset : Définit une bordure en 3D vers l’intérieur
• outset : Définit une bordure en 3D vers l’extérieur
• none : Ne définit aucune bordure
• hidden : Définit une bordure cachée.

Remarque : Toutes les propriétés CSS dans la suite de ce chapitre ne fonctionnent pas si la propriété border-style n’est pas définie.

Taille des bordures

Le CSS permet de donner des tailles spécifiques aux bordures. Pour ce faire, il suffit d’utiliser la propriété CSS border-width.

Cette propriété peut recevoir des valeurs spécifiques (en px, pt, cm, em, etc.) ou recevoir une des quatre valeurs spécifiques prédéfinies : thin (mince), medium (moyen) ou thick (épais).

Rappel : la propriété border-style doit absolument être définie avant de pouvoir utiliser n’importe quelle autre propriété relative aux bordures.

Exemple :

p {
    border-style : solid;
    border-width : 5px;
}

h1 {
    border-style : solid;
    border-width : medium;
}

Dans l’exemple ci-dessus, la largeur de la bordure autour du paragraphe est définie à cinq pixels (px), tandis que pour le titre, la largeur de la bordure est définie grâce à la valeur medium.

Tailles de bordures spécifiques