La propriété CSS border-style
Apprenez à utiliser la propriété CSS border-style pour définir le style des quatre côtés d'une bordure, avec des valeurs et des exemples.
La propriété CSS border-style définit le style de ligne des quatre côtés de la bordure d'un élément en une seule déclaration — par exemple solid, dashed ou dotted. Cette page explique chaque valeur, comment le raccourci de une à quatre valeurs s'applique à chaque côté, et les pièges à connaître avant de mettre une bordure en production.
border-style est un raccourci pour les quatre propriétés de côté individuelles : border-top-style, border-bottom-style, border-left-style et border-right-style.
Pourquoi c'est important
Une bordure ne devient visible que lorsqu'elle possède un style. C'est le piège le plus courant pour les débutants : si vous définissez border-width et border-color mais laissez border-style à sa valeur par défaut none, rien ne s'affiche — le navigateur ne réserve aucun espace et ne trace aucune ligne. Ainsi, border-style est en réalité l'interrupteur qui active une bordure. Dans la plupart des cas réels, on définit les trois propriétés à la fois avec le raccourci border (par ex. border: 1px solid #1c87c9;), mais utiliser border-style directement est utile quand on veut un style de ligne différent par côté, ou quand on ne change que le style au survol/focus tout en gardant la largeur fixe (ce qui évite les décalages de mise en page).
La bordure est peinte par-dessus l'arrière-plan de l'élément et la valeur n'est pas héritée et n'est pas animable.
Fonctionnement du raccourci de une à quatre valeurs
border-style accepte de une à quatre valeurs, de sorte que chaque côté peut avoir son propre style :
- Une valeur — appliquée aux quatre côtés.
- Deux valeurs — la première s'applique en haut et en bas ; la seconde à gauche et à droite.
- Trois valeurs — la première s'applique en haut ; la deuxième à gauche et à droite ; la troisième en bas.
- Quatre valeurs — haut, droite, bas, gauche, dans le sens horaire (un moyen mnémotechnique pratique : TRouBLe).
Une note rapide sur la compatibilité des navigateurs : tous les navigateurs modernes prennent en charge toutes les valeurs ci-dessous. Les styles 3D (groove, ridge, inset, outset) produisent leur effet à partir de la border-color, ils sont donc subtils avec des couleurs claires et disparaissent complètement lorsque la couleur est black ou très sombre.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderStyle = "dotted double"; |
Syntaxe
Syntaxe de la propriété CSS border-style
border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;Exemple de la propriété border-style :
Exemple de la propriété CSS border-style avec la valeur dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-style: dotted;
padding: 5px;
}
</style>
</head>
<body>
<p> Example of dotted border-style.</p>
</body>
</html>Exemple de la propriété border-style où chaque côté a sa propre valeur :
Exemple de la propriété CSS border-style avec les valeurs double, solid, dashed et dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-width: 4px;
border-style: double solid dashed dotted;
border-color: #1c87c9;
color: #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<p>Example, where each side has own value.</p>
</body>
</html>Résultat
Exemple de la propriété border-style avec toutes les valeurs :
Exemple de la propriété CSS border-style avec les valeurs hidden, double, solid, dashed, dotted, groove, ridge, inset et outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #eee;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #c9c5c5;
border: 8px solid #1c87c9;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-style example classes */
.b1 {
border-style: hidden;
}
.b2 {
border-style: dotted;
}
.b3 {
border-style: dashed;
}
.b4 {
border-style: solid;
}
.b5 {
border-style: double;
}
.b6 {
border-style: groove;
}
.b7 {
border-style: ridge;
}
.b8 {
border-style: inset;
}
.b9 {
border-style: outset;
}
</style>
</head>
<body>
<h1>Border-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | N'affiche aucune bordure. Valeur par défaut. | Essayer » |
| hidden | Identique à "none", sauf lors de la résolution de conflits de bordures pour les éléments de tableau. | Essayer » |
| dotted | La bordure est définie comme une série de points. | Essayer » |
| dashed | La bordure est définie comme une série de tirets. | Essayer » |
| solid | La bordure est définie comme une ligne pleine. | Essayer » |
| double | La bordure est définie comme une double ligne pleine. | Essayer » |
| groove | Bordure en 3D avec effet de gravure, donnant l'impression que la bordure est creusée. Opposé de ridge. | Essayer » |
| ridge | Définit une bordure en 3D avec relief, donnant une impression de saillie. Opposé de groove. | Essayer » |
| inset | Effet 3D donnant l'impression que l'élément est encastré. Opposé de outset. | Essayer » |
| outset | Effet 3D donnant l'impression que l'élément est en relief. Opposé de inset. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Pièges courants
- Sans style, pas de bordure. Avec
border-style: none(valeur par défaut),border-widthetborder-colorn'ont aucun effet visible. Pensez toujours à définir un style. hiddenvsnone. Ils sont identiques sur une boîte normale. La différence n'apparaît que dans les tableaux : lors de la résolution des conflits de bordures,hiddenl'emporte et supprime la bordure de la cellule voisine, tandis quenonea la priorité la plus basse.groove,ridge,insetetoutsetnécessitent une bordure colorée et de plusieurs pixels. Leur illusion 3D est construite à partir de teintes plus claires/sombres deborder-color, donc utilisez une largeur d'au moins2px–4pxet évitez le noir ou le blanc pur.- Modifier uniquement
border-stylemaintient la taille de la boîte stable car la largeur reste inchangée — utile pour les états de survol/focus qui remplacentdashedparsolidsans perturber la mise en page.
Propriétés connexes
- border — définit la largeur, le style et la couleur en une seule déclaration.
- border-width et border-color — les deux autres composantes d'une bordure.
- border-radius — arrondit les coins d'une bordure stylisée.
- outline-style — les mêmes styles de ligne pour les contours (qui se trouvent à l'extérieur de la bordure et n'affectent pas la mise en page).