Propriété CSS border-style
La propriété CSS border-style définit le style des quatre côtés des bordures d’un élément. C’est une propriété raccourcie permettant de définir border-top-style, border-bottom-style, border-left-style, border-right-style.
Cette propriété prend de une à quatre valeurs. Ainsi, chaque côté peut avoir sa propre valeur.
La valeur par défaut de border-style est none. Les bordures sont placées au-dessus de l’arrière-plan de l’élément.
Vous devez aussi savoir que certains navigateurs ne prennent pas en charge certains styles. En général, lorsqu’un style n’est pas pris en charge, le navigateur affiche la bordure comme une bordure pleine.
La propriété border-style est définie à l’aide d’une, deux, trois ou quatre valeurs. Lorsqu’une valeur est définie, elle s’applique au même style aux quatre côtés. Lorsque deux valeurs sont définies, le premier style s’applique aux côtés supérieur et inférieur, le second aux côtés gauche et droit. Lorsque trois valeurs sont spécifiées, le premier style s’applique au côté supérieur, le second aux côtés gauche et droit, le troisième au côté inférieur. Lorsque quatre valeurs sont spécifiées, les styles s’appliquent au haut, à droite, en bas et à gauche, dans un ordre horaire.
| Valeur initiale | none |
|---|---|
| S’applique à | Tous les éléments. S’applique aussi à ::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
| Value | Description | Play it |
|---|---|---|
| none | N’affiche aucune bordure. Valeur par défaut. | Play it » |
| hidden | Identique à "none", sauf dans la résolution des conflits de bordure pour les éléments de tableau. | Play it » |
| dotted | La bordure est spécifiée sous forme d’une série de points. | Play it » |
| dashed | La bordure est spécifiée sous forme d’une série de tirets. | Play it » |
| solid | La bordure est spécifiée sous forme de lignes pleines. | Play it » |
| double | La bordure est spécifiée sous forme de lignes pleines doubles. | Play it » |
| groove | C’est une bordure 3D en creux qui donne l’impression que la bordure est sculptée. Opposé de ridge. | Play it » |
| ridge | Spécifie une bordure 3D en relief et donne l’impression d’un aspect extrudé. Opposé de groove. | Play it » |
| inset | C’est un effet 3D qui donne l’impression que l’élément est encastré. Opposé de outset. | Play it » |
| outset | C’est un effet 3D qui donne l’impression que l’élément est en relief. Opposé de inset. | Play it » |
| initial | Définit la propriété à sa valeur par défaut. | Play it » |
| inherit | Hérite de la propriété de son élément parent. |
Practice
What are the different types of border styles available in CSS according to w3docs.com?