Comment créer et gérer les bordures en CSS ? (+ exemples)

La propriété border-style

La propriété CSS border-style permet de choisir le type de bordure à afficher. Chacun des quatre côtés du cadre peut être paramétré distinctement :

• Si une valeur est spécifiée, le même style de bordure est appliqué aux quatre côtés du cadre.
• Si deux valeurs sont indiquées, la première s'applique aux lignes du haut et du bas et la seconde s'applique aux lignes latérales.
• Avec trois valeurs, la première est appliquée en haut, la deuxième à droite et à gauche, et la troisième en bas.
• Indiquer quatre valeurs permet de personnaliser dans l'ordre le haut, la droite, le bas et la gauche du cadre.

Cette syntaxe permet d'éviter de coder successivement « border-top-style », « border-right-style », « border-bottom-style » et « border-left-style ».

La propriété CSS border-style peut prendre 10 valeurs différentes :

• Les valeurs « none » et « hidden » n'affichent pas de bordure. Dans ce cas, les propriétés de largeur et d'épaisseur ne s'appliquent pas tant que la valeur « none » ou « hidden » n'est pas remplacée.
• La valeur « solid » affiche une ligne droite continue.
• La valeur « dashed » dessine une ligne en tirets.
• La valeur « dotted » dessine la ligne en pointillés.
• La valeur « double » permet d'encadrer la boîte avec deux lignes droites continues.
• La valeur « groove » crée un effet 3D où l'intérieur de la boîte semble ressortir, alors que la valeur « ridge » crée un effet 3D où le cadre apparaît en relief.
• Les valeurs « inset » et « outset » créent également des effets 3D où l'intérieur de la boîte apparaît respectivement en-dedans ou en-dehors du cadre.

À noter que renseigner le style de la bordure est obligatoire. À défaut, la bordure ne s'affiche pas, peu importe que les propriétés de largeur et de couleur soient renseignées.

Exemples de création de bordures avec la propriété CSS border-style :

See the Pen border-css_border-style by HubSpot France (@HubSpot-France) on CodePen.

La propriété border-width

La propriété CSS border-width permet de choisir la largeur de la bordure. Si elle n'est pas renseignée, la bordure fait par défaut 3 px. De la même manière que le style de bordure, border-width peut s'appliquer distinctement aux quatre côtés du cadre.

Deux manières permettent d'indiquer la largeur de la bordure :

• En renseignant un mot-clé : « thin », « medium » ou « thick » du trait le moins épais au trait le plus épais.
• En indiquant l'épaisseur exacte du trait, en pixels « px » par exemple.

Exemples de configuration de la largeur des bordures avec la propriété CSS border-width :

See the Pen border-css_border-width by HubSpot France (@HubSpot-France) on CodePen.

À noter que comme observé dans l'exemple, la propriété CSS border suffit au navigateur pour comprendre qu'il faut paramétrer la largeur de la bordure. L'indication « border: medium solid » équivaut à « border-style: solid; border-width: medium ».

La propriété border-color

La propriété CSS border-color permet de choisir la couleur de la bordure. Si elle n'est pas renseignée, la bordure s'affiche par défaut en noir. De la même manière que le style et la largeur de bordure, border-color peut s'appliquer distinctement aux quatre côtés du cadre.

Il existe plusieurs façons de définir la couleur : le nom de la couleur en anglais, les valeurs RGB et RGBA, les codes hexadécimaux ou les valeurs HSL et HSLA.

Illustration :

See the Pen border-css_border-color by HubSpot France (@HubSpot-France) on CodePen.

Autres options de personnalisation des bordures CSS

Paramétrer l'espace entre le contenu de la boîte et la bordure

La propriété CSS padding permet de créer plus d'espace entre le cadre et le contenu de la boîte. Pour indiquer l'espacement, il faut utiliser une valeur en pixels ou en pourcentage.

De la même manière que le style, la largeur et la couleur de bordure, padding peut s'appliquer distinctement aux quatre côtés du cadre.

Exemple de code CSS pour augmenter l'espace entre la bordure et le texte :

See the Pen border-css_padding by HubSpot France (@HubSpot-France) on CodePen.

Appliquer un effet d'ombrage sur la bordure

La propriété CSS box-shadow permet d'ajouter une ombre à la boîte. Cet effet donne du relief aux bordures. Pour paramétrer l'ombre, il faut indiquer les valeurs suivantes :

• Le décalage de l'ombre par rapport à la bordure est renseigné par deux valeurs en pixels. La première valeur, appelée « offset-x », correspond au décalage horizontal : une valeur positive déporte l'ombre à droite, une valeur négative déporte l'ombre à gauche. La seconde valeur, appelée « offset-y », correspond au décalage vertical : une valeur positive déporte l'ombre en bas, une valeur négative déporte l'ombre en haut.
• Le degré de flou de l'ombre, « blur-radius », est renseigné par une valeur en pixels. Plus elle est élevée, plus l'ombre est diffuse.
• La taille de l'ombre, « spread-radius », est agrandie si la valeur est positive, rétrécie si la valeur est négative.
• L'ombre peut s'afficher en couleur en renseignant une valeur « color ».
• Ajouter le mot-clé « inset » dans la liste des valeurs de la propriété CSS box-shadow permet de placer l'ombre à l'intérieur des bordures de la boîte.

Exemples de boîtes aux bordures ombragées :

See the Pen border-css_box-shadow by HubSpot France (@HubSpot-France) on CodePen.

Remplacer la ligne de la bordure par une image

La propriété CSS border-image permet de faire d'une image la bordure du cadre. il faut renseigner a minima trois valeurs :

• La valeur « border-image-source » indique la source de l'image : l'URL du site ou le nom du fichier image.
• La valeur « border-image-slice » indique, en pourcentage, comment découper l'image pour former la bordure.
• La valeur « border-image-repeat » indique comment adapter l'image pour former la bordure. La valeur par défaut est « stretch », elle peut être remplacée par les valeurs « repeat » ou « round ».

Les valeurs « border-image-width » et « border-image-outset » déterminent respectivement la largeur de l'image de bordure et sa distance avec le contenu de la boîte.

À noter que la propriété CSS border-image peut également servir à afficher une bordure en dégradé de couleurs. Pour cela, il faut renseigner les valeurs « linear-gradient » ou « repeating-linear-gradient », puis indiquer les couleurs entre parenthèses. Une valeur « border-image-slice » doit également figurer.

Voici un exemple de code CSS qui utilise la propriété border-image pour créer une bordure en dégradé de couleurs :

See the Pen border-css_border-image by HubSpot France (@HubSpot-France) on CodePen.

Dessiner une bordure arrondie

La propriété CSS border-radius, indiquée en pixels, permet d'arrondir les angles de la bordure. Plus la valeur est élevée, plus l'angle est arrondi. En paramétrant chaque angle, il est possible de dessiner une boîte de la forme de son choix. De la même manière que les propriétés CSS border-style, border-width, border-color et padding, en effet, border-radius peut s'appliquer distinctement aux quatre côtés du cadre. Pour rappel :

• Si une valeur est spécifiée, les quatre coins ont le même angle.
• Si deux valeurs sont indiquées, la première s'applique aux coins en haut à gauche et en bas à droite, et la seconde s'applique aux coins en haut à droite et en bas à gauche.
• Avec trois valeurs, la première est appliquée en haut à gauche, la deuxième en haut à droite et en bas à gauche, et la troisième en bas à droite.
• Indiquer quatre valeurs permet de personnaliser les angles dans l'ordre des aiguilles d'une montre en partant du coin en haut à gauche.

Exemple de personnalisation des angles de la bordure :

See the Pen border-css_border-radius by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.