Propriété CSS border-style
La propriété CSS border-style définit le style de toutes les côtés des bordures d'un élément. C'est une propriété raccourcie définissant les border-top-style, border-bottom-style, border-left-style, border-right-style.
Cette propriété peut avoir d'un à quatre valeurs. Donc, chaque côté peut avoir sa propre valeur.
La valeur par défaut de la propriété border-style est "none". Les bordures sont placées en haut du fond de l'élément.
De plus, vous devez savoir que quelques navigateurs ne supportent pas quelques types des styles. Généralement, si le style n'est pas supporté, le navigateur affiche une bordure solide.
La propriété border-style peut être spécifiée en utilisant une, deux, trois ou quatre valeurs. Si on a une valeur spécifiée, cela applique le même style pour tous les quatres côtés . Quand on a deux valeurs spécifiées, le premier style est appliqué aux côtés supérieure et inférieure; le deuxième style est appliqué aux côtés gauche et droit. Quand on a trois valeurs spécifiées, le premier style est appliqué au supérieure, le deuxième style est appliqué aux gauche et droit, et le troisième est appliqué à l'inférieure. Quand il y a quatre valeurs spécifiées, les styles sont appliqués aux côtés supérieure, droit, inférieure et gauche, comme un ordre horaire.
| Valeur initiale | none |
| Appliquée à | Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderStyle = "dotted double"; |
Syntaxe
border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
border-style: dotted;
padding: 5px;
}
</style>
</head>
<body>
<p> Exemple de border style en pointillé (dotted).</p>
</body>
</html>Comme vous le voyez dans l'exemple donné, tous les côtés ont la même valeur.
Maintenant, voyons un exemple, où chaque côté a sa propre valeur.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
border-width: 4px;
border-style: double solid dashed dotted;
border-color: #1c87c9;
color: #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<p> Exemple, où chaque côté a sa propre valeur.</p>
</body>
</html>Voyons un autre exemple, où tous les quatre valeurs sont utilisées.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>
<h2>Exemples des valeurs de border-style </h2>
<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 |
|---|---|
| none | N'affiche aucune bordure. Valeur par défaut. |
| hidden | Le même que "none", à l'exception de la résolution du conflict de bordure pour les élément de table. |
| dotted | Définit une bordure en pointillé. |
| dashed | Définit une bordure de tirets. |
| solid | Définit une bordure solide. |
| double | La bordure est spécifiée comme les doubles lignes solides. |
| groove | Définit une 3D bordure rainurée et donne l'impression que la bordure est découpée. Le contraire de ridge. |
| ridge | Définit une 3D bordure striée et donne l'impression de l'apparence extrudé. Le contraire de groove. |
| inset | C'est un effet 3D qui donne l'impression que l'élément apparaît embarqué. Le contraire de outset. |
| outset | C'est un effet 3D qui donne l'impression que l'élément apparaît en relief. Le contraire de inset. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Pratiquez vos connaissances
