Gestion des bordures avec la propriété CSS border

Nous allons pouvoir définir des bordures de largeurs, de styles ou de couleurs différents autour de nos éléments HTML en CSS.

L’espace pris par la bordure va se trouver entre la marge intérieure et la marge extérieure d’un élément HTML.

Nous pouvons définir les bordures d’un élément de différentes manières en CSS : soit en utilisant les trois propriétés border-width, border-style et border-color, soit un utilisant directement la notation raccourcie border.

Nous allons également pouvoir créer des bordures arrondies à l’aide de la propriété border-radius que nous étudierons plus tard dans ce cours car elle est relativement complexe à comprendre et à maitriser.

 

Les caractéristiques des bordures en CSS

Les bordures vont être définies par trois caractéristiques en CSS : une épaisseur (ou largeur), un style et une couleur.

Nous allons pouvoir définir ces différentes caractéristiques d’un coup au sein de la propriété raccourcie border ou les définir une à une avec chacune des propriétés de type border-. Plus précisément :

• La propriété border-width va nous permettre de définir la largeur (ou « l’épaisseur) d’une bordure ;
• La propriété border-style va nous permettre de définir le style d’une bordure ;
• La propriété border-color va nous permettre de définir la couleur d’une bordure.

Définir la largeur ou l’épaisseur d’une bordure

Nous allons pouvoir utiliser différents types de valeurs pour définir la largeur d’une bordure :

• Une valeur de type « mot clef » à choisir parmi thin (bordure fine), medium (bordure moyenne) et thick (bordure épaisse) ;
• Une valeur de type « longueur » en px ou en em par exemple.

Généralement, nous utiliserons des unités en px pour définir la largeur de nos bordures.

Choisir le style d’une bordure

Le « style » d’une bordure correspond à son aspect : une bordure peut prendre la forme d’un simple trait, d’un trait double, ou être constituée de pointillés, avoir un effet 3D, etc.

Pour définir le style d’une bordure, nous allons devoir choisir parmi les mots clefs suivants :

Valeur	Description
solid	Bordure solide simple (un trait)
double	Bordure solide double
dotted	Bordure en pointillés
dashed	Bordure constituée de tirets
groove	Bordure incrustée avec effet 3D. L’effet produit est l’inverse de ridge
ridge	Bordure en relief avec effet 3D. L’effet produit est l’inverse de groove
inset	La bordure donne l’effet que la boite représentant l’élément est enfoncée dans la page. L’effet produit est l’inverse de outset
outset	La bordure donne l’effet que la boite représentant l’élément est en relief par rapport au reste de la page. L’effet produit est l’inverse de inset

Chaque mot clef va créer un type de bordure différent. Voici à quoi correspond chaque effet visuellement :

Définir la couleur d’une bordure

Finalement, nous allons devoir définir la couleur d’une bordure. Pour cela, nous allons pouvoir piocher parmi toutes les valeurs de type « couleur » connues et notamment :

• Les notations de type « nom de couleur » ;
• Les notations hexadécimales ;
• Les notations RGB() et RGBa() ;
• Les notations HSL() et HSLa().

 

Exemples de création de bordures en CSS

La suite de cette leçon va être pour nous l’occasion de s’exercer et de créer toutes sortes de bordures. Je vous rappelle ici que nous aborderons les bordures arrondies dans la prochaine leçon.

Commençons déjà avec des exemples simples de bordures créées en CSS en appliquant ce que nous avons vu ci-dessous.

Ici, nous allons créer 4 types de bordures différentes : une bordure simple, une bordure double, une avec effet 3D de type « ridge » et une avec un style « outset ».

Nous allons pouvoir faire cela en utilisant soit les propriétés border-width, border-style et border-color, soit la notation raccourcie border.

See the Pen Cours HTML CSS 5.4.1 by Pierre (@pierregiraud) on CodePen.

Ici, nous nous contentons d’ajouter des bordures différentes autour de nos paragraphes. J’ai également rajouté une couleur de fond aux deux derniers paragraphes afin que l’on puisse bien observer l’effet de 3D des deux dernières bordures.

Notez une chose intéressante par rapport à notre bordure double : la taille de la bordure correspond à la taille totale de la bordure, c’est-à-dire dans ce cas du double trait et de l’espace entre ces deux traits. La largeur totale va être répartie régulièrement : en indiquant une bordure double de 15px, chaque élément de la bordure (les deux traits plus l’espace entre les traits) va faire 5px de large (15px / 3).

Définir des bordures différentes pour chaque côté d’un élément

Le CSS va également nous permettre de définir chacune des quatre bordures de nos éléments indépendamment les unes des autres afin de pouvoir appliquer des effets intéressants.

Nous avons deux façons de faire cela selon que nous utilisions la notation raccourcie border pour définir nos bordures ou que nous utilisions chacune des propriétés border-.

Dans le cas où nous souhaitons utiliser border, nous allons devoir utiliser 4 sous propriétés CSS qui sont :

• border-top pour définir l’aspect (taille, style et couleur) de la bordure supérieure de l’élément ;
• border-right pour définir l’aspect (taille, style et couleur) de la bordure droite de l’élément ;
• border-bottom pour définir l’aspect (taille, style et couleur) de la bordure inférieure de l’élément ;
• border-left pour définir l’aspect (taille, style et couleur) de la bordure gauche de l’élément.

Bon à savoir : Les propriétés border-top, border-right, border-bottom et border-left sont à nouveau des écritures raccourcies des propriétés CSS border-top-width, border-top-style, border-top-color, etc.

Dans le cas où nous utilisons les propriétés border-width, border-style et border-color alors nous pourrons indiquer 4 valeurs à la suite qui définiront le comportement des bordures supérieure, droite, inférieure et gauche dans cet ordre.

Notez ici qu’il est tout à fait possible de ne renseigner qu’une valeur pour l’une de ces 3 propriétés si vous voulez que vos 4 bordures aient le même comportement. Vous pouvez également ne mentionner que deux valeurs : dans ce cas, la première valeur définira le comportement des bordures supérieure et inférieure tandis que la seconde définira le comportement des bordures droite et gauche de l’élément.

Regardez plutôt les exemples ci-dessous qui résument toutes les situations possibles pour bien comprendre :

See the Pen Cours HTML CSS 5.4.2 by Pierre (@pierregiraud) on CodePen.

Créer des bordures semi transparentes

Nous allons encore pouvoir ajouter un effet de transparence à nos bordures en utilisant tout simplement une notation RGBa lorsque l’on précisera la paramètre couleur de notre bordure.

Notez ici qu’utiliser la propriété CSS opacity ne produirait pas le comportement voulu puisque l’effet de transparence serait appliqué à l’élément entier et non pas seulement à la bordure comme on le souhaite.

See the Pen Cours HTML CSS 5.4.3 by Pierre (@pierregiraud) on CodePen.

 

Les bordures dans le modèle des boites

Les bordures d’un élément HTML se situent entre les marges internes et externes de l’élément.

La taille des bordures va par défaut venir s’ajouter aux dimensions de l’élément définies avec les propriétés width et height ainsi qu’aux marges internes.

Notez que nous allons pouvoir définir des bordures de la même façon pour des éléments de type block et inline et que ces bordures auront exactement le même comportement.