Propriété CSS border-left-style
La propriété CSS border-left-style définit le style de la bordure gauche d'un élément. Elle est définie comme un mot-clé unique sélectionné parmi ceux disponibles pour la propriété border-style. Contrairement à border-style, qui définit le style pour les quatre côtés, border-left-style définit le style uniquement pour la bordure gauche.
La largeur par défaut de la bordure gauche est medium. Elle peut être modifiée soit avec la propriété border-left-width, soit avec la propriété border-width.
Tous les navigateurs ne rendent pas les styles de la même manière. Par exemple, Chrome affiche les points sous forme de rectangles, et non de cercles.
INFO
La spécification ne précise pas la quantité d'espacement entre les points et les tirets.
INFO
La spécification ne définit pas comment les bordures de styles différents se connectent dans les coins.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Non |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderLeftStyle = "solid"; |
Syntaxe
Syntaxe de la propriété CSS border-left-style
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple de la propriété border-left-style :
Exemple de la propriété CSS border-left-style avec les valeurs solid et dotted
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left-style: solid;
}
div {
border-left-style: dotted;
}
</style>
</head>
<body>
<p> Example with solid border-left-style.</p>
<div>Example with dotted border-left-style.</div>
</body>
</html>INFO
Selon la valeur de border-color, les effets des valeurs groove, ridge, inset et outset peuvent être modifiés.
Exemple de la propriété border-left-style avec toutes les valeurs :
Exemple de la propriété CSS border-left-style avec les valeurs hidden, dotted, dashed, solid, double, groove, ridge, inset et outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c9c5c5;
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: #8ebf42;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-left-style example classes */
.b1 {
border-left-style: hidden;
}
.b2 {
border-left-style: dotted;
}
.b3 {
border-left-style: dashed;
}
.b4 {
border-left-style: solid;
}
.b5 {
border-left-style: double;
}
.b6 {
border-left-style: groove;
}
.b7 {
border-left-style: ridge;
}
.b8 {
border-left-style: inset;
}
.b9 {
border-left-style: outset;
}
</style>
</head>
<body>
<h1>Border-left-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>Résultat
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | Définit qu'il n'y aura pas de bordure. Valeur par défaut. | |
| hidden | Identique à none, sauf pour la résolution des conflits de bordures sur les éléments de tableau, où elle supprime complètement la bordure gauche du rendu. | |
| dotted | Définit une bordure en pointillés. | |
| dashed | Définit une bordure en tirets. | |
| double | Définit une bordure double. | |
| solid | Définit une bordure pleine. | |
| groove | Définit une bordure en creux 3D. Son effet peut être modifié avec la valeur de border-color. | |
| ridge | Définit une bordure en relief 3D. Son effet peut être modifié avec la valeur de border-color. | |
| inset | Définit une bordure enfoncée 3D. Son effet peut être modifié avec la valeur de border-color. | |
| outset | Définit une bordure saillante 3D. Son effet peut être modifié avec la valeur de border-color. | |
| initial | Définit la propriété à sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelles valeurs la propriété 'border-left-style' en CSS peut-elle prendre ?