6 façons de créer une double bordure en CSS

par


Les bordures jouent un rôle essentiel dans le design et le développement web. Elles peuvent servir à capter l’attention de l’utilisateur ou à organiser le contenu d’une page web. L’utilisation d’un raccourci pour les bordures est pratique lorsque vous souhaitez appliquer un style uniforme aux quatre côtés d’un élément HTML.

Par ailleurs, les propriétés de couleur, de style et de largeur de bordure offrent la possibilité de personnaliser chaque bord de manière unique. La propriété `border-color` permet de définir la couleur, `border-width` contrôle l’épaisseur, et `border-style` détermine l’apparence de la bordure (pointillée, double, pleine, etc.).

Il est également possible de cibler spécifiquement certaines bordures, par exemple avec `border-block-start` ou `border-top`, offrant un contrôle précis sur l’aspect de chaque côté.

Une bordure double se caractérise par deux lignes parallèles encadrant un élément HTML. Un espace sépare ces deux lignes, qui peut être transparent ou bien rempli d’une couleur ou d’une image de fond.

Par exemple, un bouton d’inscription ou de connexion peut être mis en valeur grâce à une bordure double.

Pourquoi opter pour une double bordure ?

  • Séparation : Elle permet d’améliorer la lisibilité et la navigation sur une page web en segmentant le contenu. Par exemple, vous pouvez délimiter l’en-tête, le corps et le pied de page d’un site avec des bordures doubles.
  • Attrait visuel : L’utilisation de couleurs variées ou contrastées pour les lignes d’une bordure double peut rendre un élément plus attrayant visuellement.
  • Hiérarchie : Les bordures doubles permettent de mettre en évidence les éléments importants d’une page web, les distinguant ainsi des éléments secondaires.
  • Personnalisation : Elles offrent une grande liberté créative en permettant de modifier l’épaisseur et la couleur de chaque ligne, pour un design unique et personnalisé.
  • Mise en valeur : Une bordure double peut attirer l’attention sur des liens ou des boutons particuliers, incitant ainsi à l’action.

Voici les différentes méthodes pour créer une bordure double en CSS.

Utilisation de la propriété `border-style`

La propriété `border-style` permet de définir le style des quatre bordures d’un élément. On utilise le mot-clé `double` pour obtenir une bordure double. Un espace est automatiquement créé entre les deux lignes.

Dans notre exemple, nous définirons une largeur de bordure de 15 pixels, une couleur rouge et un style double.

Code HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
  </head>
  <body>
    <div class="box"> <h2> Bordure Simple </h2> </div>
  </body>
</html>

Code CSS :

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 15px;
}
div {
    width: 350px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box {
    border-width: 15px;
    border-color: red;
    border-style: double;
}

Le rendu sera :

Utilisation de la fonction `linear-gradient()`

Cette fonction permet de créer un dégradé linéaire en tant qu’image de fond. Elle assure une transition progressive entre deux couleurs le long d’une ligne droite. Le mot-clé `to` indique le point de départ du dégradé. Si aucune direction n’est spécifiée, la valeur par défaut est vers le bas.

Dans l’exemple ci-dessous, nous définissons une largeur de bordure de 7 pixels. Nous appliquons ensuite un dégradé linéaire sur chaque côté de la boîte via la propriété `background`.

Code HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
  </head>
  <body>
    <div class="box"> <h2>linear-gradient()</h2> </div>
  </body>
</html>

Code CSS :

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 15px;
}
div {
    width: 350px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box {
    border: 7px solid rgb(36, 85, 7);
    background: linear-gradient(to top, #8f0404 7px, transparent 1px),
    linear-gradient(to bottom, #8f0404 7px, transparent 1px),
    linear-gradient(to left, #8f0404 7px, transparent 1px),
    linear-gradient(to right, #8f0404 7px, transparent 1px);
}

Le rendu sera :

Utilisation de la propriété `outline`

Un contour est une ligne tracée à l’extérieur de la bordure d’un élément. Il permet de simuler l’effet d’une double bordure en utilisant un contour combiné avec une bordure simple. La propriété `outline-offset` permet d’ajouter un espace entre la bordure et le contour.

Code HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
  </head>
  <body>
    <div class="box"> <h2>Contour</h2> </div>
  </body>
</html>

Code CSS :

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 15px;
}
div {
    width: 350px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box {
    border: 5px solid red;
    outline: 5px solid blue;
    outline-offset: -20px;
}

Le rendu sera :

Utilisation de la propriété `box-shadow`

La propriété `box-shadow` permet d’ajouter un effet d’ombre autour d’un élément. Il est possible d’appliquer plusieurs ombres en les séparant par des virgules. Pour créer un effet de double bordure, on règle les décalages et le flou à zéro, puis on ajuste la taille et la couleur des ombres.

Code HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
  </head>
  <body>
    <div class="box"> <h2>Ombre de Boîte</h2> </div>
  </body>
</html>

Code CSS : 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 15px;
}
div {
    width: 350px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box {
    box-shadow:
        0 0 0 5px red,
        0 0 0 10px green;
}

Le rendu sera :

Utilisation de la propriété `background-clip`

La propriété `background-clip` détermine la zone où s’étend l’arrière-plan d’un élément. L’arrière-plan peut s’étendre jusqu’à la `border-box`, la `padding-box` ou la `content-box`.

Code HTML : 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
  </head>
  <body>
    <div class="box"> <h2>Background-Clip</h2> </div>
  </body>
</html>

Code CSS : 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 15px;
}
div {
    width: 350px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box {
    border: 7px solid rgb(36, 85, 7);
    padding: 5px;
    background-clip: content-box;
    background-color: rgb(238, 152, 130);
}

Le rendu sera :

Utilisation de pseudo-éléments

Les pseudo-éléments, représentés par les sélecteurs `::before` et `::after`, permettent aux développeurs de modifier l’apparence de parties spécifiques d’un document HTML sans avoir à ajouter de contenu directement dans le code HTML.

Voici comment utiliser les pseudo-éléments pour créer une double bordure :

Code HTML : 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />
  </head>
  <body>
    <div class="box"> <h2>Pseudo-éléments</h2> </div>
  </body>
</html>

Code CSS :

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 15px;
}
div {
    width: 150px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box {
    background-color: brown;
}
.box {
    background-color: rebeccapurple;
    position: relative;
    border: 8px solid red;
}
.box::before {
    content: " ";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 8px solid green;
    border-width: 6px;
    border-color: green white green white;
    width: 150px;
    height: 100px;
}

Le rendu sera :

Exemples concrets de bordures doubles en CSS

La propriété CSS de bordure double est utilisée sur de nombreux sites web. Il est essentiel de la combiner avec d’autres propriétés CSS pour un résultat optimal. Voici deux exemples de bordures doubles en situation réelle :

Le bouton « Panier » sur Amazon

Amazon, géant du commerce en ligne, utilise une double bordure sur son bouton « Panier » afin d’attirer l’attention et d’inciter à l’action.

Ces bordures doubles apparaissent lorsque l’utilisateur survole le bouton « panier ». Elles sont également présentes lors du survol du menu de navigation d’Amazon.

Les boutons Mailchimp

Mailchimp, service de marketing par email, utilise des effets de double bordure sur diverses sections de son site. Les boutons d’inscription et de connexion sont encadrés par des bordures doubles, créant un sentiment d’urgence lorsque l’utilisateur navigue.

La bordure inférieure de ces boutons s’épaissit au survol de la souris.

Meilleures pratiques pour l’utilisation de l’effet CSS de double bordure

Il est facile de tomber dans l’excès lorsque l’on utilise les doubles bordures CSS. L’objectif est de faciliter la navigation et de mettre en valeur les éléments importants de votre site. Voici quelques bonnes pratiques :

  • Cohérence : Si vous choisissez d’utiliser des bordures doubles, assurez-vous qu’elles soient appliquées de manière cohérente sur l’ensemble des éléments (boutons de navigation, appels à l’action, etc.). Privilégiez les mêmes couleurs et épaisseurs de bordure si possible.
  • Compatibilité : Vérifiez que les doubles bordures s’affichent correctement sur différents types d’appareils (smartphones, ordinateurs, tablettes) et tailles d’écran.
  • Parcimonie : L’effet CSS de double bordure est pertinent pour certains éléments d’une page web, mais son utilisation excessive peut nuire à l’esthétique générale. Utilisez-la là où elle apporte une réelle valeur ajoutée au design.

Conclusion

Nous avons exploré les différentes méthodes pour créer une double bordure en CSS. Le choix de la méthode dépend de l’effet désiré et de vos préférences. Vous pouvez choisir de n’utiliser qu’une seule technique ou bien de combiner plusieurs styles de bordures doubles sur une même page.

Vous trouverez plus d’informations sur les feuilles de style en cascade dans ces ressources CSS.



Tweetez
Partagez
Épingle
Partagez
Partagez
0 Partages