Propriété CSS border-left-width
La propriété border-left-width définit la largeur de la bordure gauche d'un élément. Découvrez toutes les valeurs avec des exemples.
La propriété CSS border-left-width définit la largeur (épaisseur) de la bordure gauche d'un élément. C'est l'équivalent unilatéral de border-width, qui vous permet de contrôler uniquement le bord gauche sans toucher les bordures du haut, de droite ou du bas.
La largeur de la bordure gauche — comme tous les autres côtés — peut également être définie avec les propriétés abrégées border ou border-width. Utilisez border-left-width lorsque vous devez styliser uniquement le bord gauche, un motif courant pour les barres latérales, les citations en bloc et les "bandes d'appel" sur le côté d'un élément.
Pourquoi la bordure doit d'abord exister
Une largeur de bordure n'a aucun effet visible par elle-même. Le navigateur ne peint une bordure que lorsqu'un border-style est défini (le style par défaut est none), donc une déclaration comme border-left-width: thick; ne fait rien tant que vous ne définissez pas également un style. Définissez-le avec border-left-style ou la propriété abrégée border-style :
/* width alone — nothing renders, because the style is still `none` */
.box {
border-left-width: thick;
}
/* correct — a style is present, so the 5px left border is painted */
.box {
border-left-style: solid;
border-left-width: 5px;
border-left-color: teal;
}La même règle s'applique à la couleur : si vous omettez border-left-color, la bordure utilise la currentColor de l'élément (sa couleur de texte).
La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. Cependant, ils respectent toujours cet ordre : thin ≤ medium ≤ thick.
La spécification ne définit pas comment les bordures de largeur et de styles différents se rejoignent 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
![Propriété CSS border-left-width](/uploads/media/default/0001/03/6406dd863a4db0df218023217fcf17f182a53660.png "CSS border-left-width Property" =420x)
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| medium | Définit une bordure gauche moyenne. C'est la valeur par défaut de cette propriété. | Essayer » |
| thin | Définit une bordure gauche fine. C'est à l'agent utilisateur de déterminer la largeur exacte. | Essayer » |
| thick | Définit une bordure gauche épaisse. C'est à l'agent utilisateur de déterminer la largeur exacte. | Essayer » |
| length | Définit l'épaisseur de la bordure gauche. Par exemple, 10px, 5em, 8pt, etc. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Les pourcentages ne sont pas autorisés pour les largeurs de bordure — border-left-width: 50% est invalide et la déclaration est ignorée. Utilisez une longueur fixe (px, em, rem) ou l'un des mots-clés à la place.
Points importants à retenir
- Un style est requis. La largeur et la couleur sont sans effet tant que border-style n'est pas défini à autre chose que
none. - L'épaisseur des mots-clés est définie par le navigateur.
thin,mediumetthickn'ont pas de valeurs en pixels fixes dans la spécification ; ils garantissent seulement l'ordrethin ≤ medium ≤ thick. Pour des designs au pixel près, utilisez une longueur explicite. - Cela affecte la mise en page. La largeur de la bordure s'ajoute à la taille rendue de l'élément, sauf si box-sizing est défini sur
border-box, auquel cas la bordure est dessinée à l'intérieur de la largeur déclarée. - Animable. La valeur peut être transitionnée et animée, ce qui rend
border-left-widthpratique pour les effets de bande au survol.
Propriétés associées
- border-left-style et border-left-color — les deux autres composantes de la bordure gauche.
- border-left — la propriété abrégée pour la largeur, le style et la couleur du côté gauche en une seule déclaration.
- border-right-width, border-top-width, border-bottom-width — le même contrôle pour les autres côtés.