6 façons de créer une double bordure en CSS
Les bordures sont cruciales dans la conception/le développement Web car elles peuvent attirer l'attention sur les utilisateurs ou séparer le contenu d'une page Web. Vous pouvez utiliser le raccourci de bordure lorsque vous souhaitez que les quatre bordures d'un élément HTML soient identiques.
D'autre part, vous pouvez également utiliser les propriétés de couleur de bordure, de style de bordure et de largeur de bordure pour rendre chaque bordure différente/unique. Lorsque vous souhaitez spécifier la couleur de la bordure, nous utilisons la couleur de la bordure, utilisons la largeur de la bordure pour déterminer la largeur de la bordure et spécifions si une bordure sera en pointillé, double ou solide à l'aide de la propriété border-style.
Vous pouvez également cibler des bordures individuelles à l'aide de propriétés telles que border-block-start et border-top
Une double bordure est lorsque deux lignes parallèles entourent un élément HTML. Les deux lignes sont séparées par un espace qui peut être laissé transparent ou rempli d'une image ou d'une couleur de fond.
Par exemple, nous pouvons avoir un bouton d'inscription/connexion entouré d'une double bordure.
Pourquoi une double frontière ?
- Séparation: Vous pouvez utiliser une double bordure pour augmenter la lisibilité et la capacité de numérisation d'une page Web en séparant différents éléments HTML. Par exemple, vous pouvez avoir des bordures doubles pour séparer des éléments tels que les en-têtes, le corps et les pieds de page sur une page Web.
- Attrait visuel: Vous pouvez utiliser des couleurs différentes/contrastées sur les doubles bordures pour rendre différents éléments plus attrayants visuellement.
- Afficher la hiérarchie : Vous pouvez clairement distinguer les éléments importants et moins importants d'une page Web à l'aide de doubles bordures.
- Facilité de personnalisation : Vous pouvez créer des designs personnalisés et uniques à l'aide de doubles bordures. Par exemple, vous pouvez modifier la couleur ou la largeur de chaque ligne.
- Accentuation: En utilisant la propriété de double bordure, vous pouvez attirer l'attention sur des liens ou des boutons spécifiques sur une page Web.
Vous pouvez utiliser les méthodes suivantes pour créer la double bordure en CSS.
Utilisation de la propriété de style bordure
L' border-style La propriété définit le style des quatre bordures d'un élément. Nous utilisons le mot-clé double pour définir le style dans ce cas. Lorsque nous utilisons le mot-clé double, un remplissage automatique est créé entre les deux bordures.
À des fins de démonstration, nous allons définir la largeur de la bordure sur 15 pixels. Nous choisirons également notre couleur de bordure pour qu'elle soit rouge et indiquerons que le style de bordure est double.
Code HTML:
<!DOCTYPE html>
<html lang="en">
<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="./style.css" />
</head>
<body>
<div class="box"> <h2> Border Property</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;
}La sortie sera:
Utilisation de la fonction linear-gradient()
Cette fonction définit un linear gradient comme image de fond. Le résultat est une transition progressive entre deux couleurs le long d'une ligne droite. Nous utilisons le mot clé to pour marquer le point de départ de la ligne de dégradé. Si la commande n'est pas précisée, la valeur par défaut est to bottom.
Le code ci-dessous donne à notre boîte une largeur de bordure de 7 pixels. Nous pouvons ensuite spécifier le dégradé linéaire sur la propriété background de chaque côté de la boîte.
Code HTML:
<!DOCTYPE html>
<html lang="en">
<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="./style.css" />
</head>
<body>
<div class="box"> <h2>linear-gradient() function</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);
}La sortie sera:
Utilisation de la propriété Contour
An outline est une ligne tracée à l'extérieur de la bordure d'un élément. Cela permet d'obtenir l'effet de double bordure et nous pouvons utiliser un contour et une seule bordure. Nous devons utiliser outline-offset pour ajouter un espace entre les propriétés border et outline.
Code HTML:
<!DOCTYPE html>
<html lang="en">
<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="./style.css" />
</head>
<body>
<div class="box"> <h2>Outline Property</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;
}La page rendue apparaîtra comme suit :
Utilisation de la propriété box-shadow
L' box-shadow La propriété ajoute un effet d'ombre autour du cadre d'un élément. Vous pouvez avoir plusieurs effets d'ombre de boîte séparés par des virgules. Commencez par vous assurer que les paramètres de décalage et de flou sont à zéro, puis réglez les ombres aux tailles appropriées.
HTML:
<!DOCTYPE html>
<html lang="en">
<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="./style.css" />
</head>
<body>
<div class="box"> <h2>Box Shadow Property</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;
}La page rendue apparaîtra comme suit :
Utilisation de la propriété background-clip
L' background-clip La propriété détermine jusqu'où l'arrière-plan doit s'étendre dans un élément. L'extension peut être sur la border-box, la padding-box ou la content-box.
Code HTML:
<!DOCTYPE html>
<html lang="en">
<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="./style.css" />
</head>
<body>
<div class="box"> <h2>Background-Clip Property</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);
}La page rendue apparaîtra comme suit :
Utilisation de pseudo-éléments
Les pseudo-éléments, représentés par ::before et ::after Les sélecteurs permettent aux concepteurs Web de styliser des parties d'un document HTML sans ajouter de balisage au code.
Nous pouvons illustrer comment utiliser des pseudo-éléments pour créer une double bordure en utilisant ce code :
document HTML
<!DOCTYPE html>
<html lang="en">
<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="./style.css" />
</head>
<body>
<div class="box"> <h2>pseudo property</h2> </div>
</body>
</html>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;
}La page rendue apparaîtra comme suit :
Exemples concrets de CSS à double bordure
La propriété CSS à double bordure est utilisée dans de nombreux sites Web. Vous devez combiner la propriété de double bordure avec d'autres propriétés CSS pour en tirer le meilleur parti. Voici deux exemples de la double bordure en action ;
Le bouton « Panier » sur Amazon
Amazon est l'un des plus grands noms de l'espace e-commerce. Son bouton de panier a une double bordure CSS pour l'esthétique visuelle et invite les utilisateurs à agir.
Les doubles bordures apparaissent lorsqu'un utilisateur survole le bouton "panier". Les bordures sont également visibles lorsque vous survolez le menu de navigation d'Amazon.
Boutons Mailchimp
Mailchimp est un service de marketing par e-mail qui permet aux utilisateurs de créer, lancer et suivre des campagnes. Son site Web utilise des effets de double bordure sur diverses sections. Les boutons d'inscription et de connexion ont des bordures doubles pour « créer » un sentiment d'urgence lorsque les utilisateurs naviguent.
La bordure en bas de ces boutons s'épaissit lorsqu'un utilisateur passe le curseur dessus.
Meilleures pratiques lors de l'utilisation de l'effet CSS à double bordure
Il est facile de se laisser emporter lorsque vous utilisez un double CSS. L'objectif final est de s'assurer que les utilisateurs naviguent facilement et mettent l'accent sur les principales zones de votre site. Suivez ces bonnes pratiques :
- Utilisez un style cohérent : Si vous utilisez des bordures doubles, assurez-vous que le style est cohérent sur tous les éléments. Par exemple, des bordures doubles peuvent être utilisées sur les boutons de navigation, d'appel à l'action et d'inscription/connexion. Si possible, assurez-vous d'avoir les mêmes couleurs et épaisseurs de marge sur les éléments à double bordure.
- Assurez-vous que ces doubles bordures fonctionnent sur différents appareils : Nous vivons dans un monde où les gens naviguent sur des sites Web depuis des smartphones, des PC et des tablettes. Testez pour vous assurer que les doubles bordures s'affichent comme prévu sur différentes tailles d'écran.
- Utilisez-les avec parcimonie : Vous pourriez être tenté d'abuser d'un certain effet CSS après l'avoir découvert pour la première fois. Cependant, le double CSS convient à divers éléments d'une page Web. N'utilisez cette propriété que dans les zones où elle ajoute de la valeur à la conception.
Conclusion
Nous avons mis en évidence les principales approches que vous pouvez utiliser pour créer une double bordure en CSS. Le choix de l'approche dépendra de ce que vous souhaitez réaliser avec la double bordure et de vos préférences. Vous pouvez décider de vous en tenir à un ou à une combinaison de plusieurs styles de double bordure sur la même page.
Vous pouvez vérifier ces Ressources CSS pour comprendre en détail les feuilles de style en cascade.
