Propriété CSS border-left-width
La propriété border-left-width est utilisée pour définir la largeur de la bordure gauche d'un élément.
La largeur de la bordure gauche, ainsi que celle de tous les autres côtés, peut également être définie à l'aide des propriétés raccourcies border ou border-width.
Pour définir border-left-width, vous devez d'abord définir la propriété border-style, car il faut une bordure avant d'en définir la largeur. Vous pouvez utiliser soit border-left-style, soit la propriété CSS border-style pour définir le style de bordure.
INFO
La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. Cependant, ils suivent toujours cet ordre : thin ≤ medium ≤ thick.
INFO
La spécification ne définit pas comment les bordures de largeurs et de styles différents se connectent dans les coins.
| Valeur initiale | medium |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Oui. La largeur de la bordure est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderLeftWidth = "4px"; |
Syntaxe
Syntaxe de la propriété CSS border-left-width
border-left-width: medium | thin | thick | length | initial | inherit;Exemple de la propriété border-left-width avec la valeur « thick » :
Exemple de la propriété CSS border-left-width avec la valeur thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 10px;
border-style: dashed;
border-left-width: thick;
}
</style>
</head>
<body>
<h2>Border-left-width example</h2>
<p>As you can see the width of the left border is set to thick.</p>
</body>
</html>Exemple de la propriété border-left-width avec toutes les valeurs :
Exemple de la propriété CSS border-left-width avec les valeurs medium, thin, thick, px, initial et inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
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;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-left-width example classes */
.b1 {
border-left-width: medium;
}
.b2 {
border-left-width: thin;
}
.b3 {
border-left-width: thick;
}
.b4 {
border-left-width: 10px;
}
.b5 {
border-left-width: initial;
}
.b6 {
border-left-width: inherit;
}
</style>
</head>
<body>
<h1>Border-left-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Résultat
Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| medium | Définit une bordure gauche de largeur moyenne. C'est la valeur par défaut de cette propriété. | Tester » |
| thin | Définit une bordure gauche fine. Il appartient au navigateur de déterminer la largeur exacte. | Tester » |
| thick | Définit une bordure gauche épaisse. Il appartient au navigateur de déterminer la largeur exacte. | Tester » |
| length | Définit la longueur d'épaisseur de la bordure gauche. Par exemple, 10px, 5em, 8pt, etc. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Parmi les valeurs suivantes, lesquelles peuvent être utilisées avec la propriété border-left-width en CSS ?