Propriété CSS border-left-style
La propriété CSS border-left-style est utilisée pour définir le style de la bordure gauche d'un élément.
La propriété border-left-style est spécifiée en tant qu'un seul mot-clé choisi parmi ceux disponibles pour la propriété border-style. La propriété border-style est utilisée pour définir le style de tous les côtés d'un élément , mais la propriété border-left-style ne définit un style que pour la bordure gauche.
La largeur de la bordure droite est moyenne. Elle peut être changée en utilisant la propriété border-left-width ou border-width.
Les navigateurs rendent les styles différement. Chrome, par exemple, couramment rend les points comme les points réctangulaires, et pas cerclés.
| 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.borderLeftStyle = "solid"; |
Syntaxe
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left-style: solid;
}
div {
border-left-style: dotted;
}
</style>
</head>
<body>
<p> Exemple avec border-left-style solide.</p>
<div>Exemple avec border-left-style en pointillé (dotted).</div>
</body>
</html>Voyons un exemple, où toutes les valeurs de style sont utilisées en ordre pour voir la différence entre elles:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>
<h2>Exemples des valeurs de border-left-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 | Définit qu'il n'y a aucune bordure. Valeur par défaut. |
| hidden | C'est 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. |
| double | Définit une double bordure. |
| solid | Définit une bordure solide. |
| groove | Définit une 3D bordure rainurée. Son effet peut être changé avec la valeur de border-color. |
| ridge | Définit une 3D bordure striée. Son effet peut être changé avec la valeur de border-color. |
| inset | Définit une 3D bordure de médaillon. Son effet peut être changé avec la valeur de border-color. |
| outset | Définit une 3D bordure de départ. Son effet peut être changé avec la valeur de border-color. |
| initial | Définit la valeur par défaut. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ |
Pratiquez vos connaissances
