CSS : border - Web Formation

Description

La propriété border permet d’ajouter une bordure autour d’un élément HTML.

Une bordure est constituée de trois propriétés principales :

border-width : l’épaisseur de la bordure
border-style : le type de trait (plein, pointillé…)
border-color : la couleur de la bordure

Ces trois propriétés peuvent être combinées dans une seule propriété raccourcie border, mais elles peuvent aussi être définies séparément.

La bordure se situe entre le padding (intérieur) et la margin (extérieur). Elle fait partie de la boîte de l’élément et modifie donc sa taille visuelle.

Elle s’inscrit dans le modèle de boîte CSS.

Propriétés détaillées

Les trois propriétés de base permettent de créer une bordure identique pour les quatre côtés d’un élément HTML.

border-width : épaisseur de la bordure
border-style : plein, pointillé, double, etc.
border-color : couleur de la bordure

Ces trois propriétés sont déclinables afin de distinguer les quatre côtés. Par exemple pour l’épaisseur des bordures :

border-top-width
border-right-width
border-bottom-width
border-left-width

Valeurs possible

Voici quelques exemples de valeurs courantes utilisables pour une bordure :

Type	Exemple	Description
Épaisseur : `width`	`1px`, `3px`, `thin`, `medium`, `thick`	Définit l’épaisseur de la bordure.
Style : `style`	`solid`, `dotted`, `dashed`, `double`, `none`	Le type de trait de la bordure.
Couleur : `color`	`#000`, `#3498db`, `red`	Couleur de la bordure, nommée ou codée.

Propriété raccourcie

La propriété border combine les trois propriétés principales :

Syntaxe	Exemple	Interprétation
`border`	`border: 2px solid #3498db;`	Épaisseur = 2px, style = plein, couleur = bleu.

Afin de distinguer les quatre côtés, il est également possible de décliner la version raccourcie sous la forme suivante :

border-top
border-right
border-bottom
border-left

Exemples

<div class="exemple-1">Boîte avec bordure 1</div>
<div class="exemple-2">Boîte avec bordure 2</div>

<div class="exemple-1">Boîte avec bordure 1</div><div class="exemple-2">Boîte avec bordure 2</div>

.exemple-1 {
    border-width: 4px;
    border-style: solid;
    border-color: gold;
}
.exemple-2 {
    border: 2px solid red;
}

.exemple-1 {    border-width: 4px;    border-style: solid;    border-color: gold;}.exemple-2 {    border: 2px solid red;}

Aperçu du résultat

Boîte avec bordure 1

Boîte avec bordure 2