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, aussi que des autres côtés, peut aussi être définie par les propriétés raccourcies border ou border-width .
Pour définir border-left-width, vous devez premièrement définir la propriété border-style, car vous avez besoin des bordures avant de définir leur largeur. Vous pouvez utiliser les propriétés CSS border-left-style ou border-style pour définir la border-style.
La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. De toute façon, ils suivent toujours à cet ordre: mince≤ medium ≤ épais.
La spécification ne définit pas comment les bordures de largeur et des styles différents se connectent dans les coins.
Valeur initiale | medium |
Appliquée à | Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter. |
Héritée | Non |
Animable | Oui. La largeur de la bordure est animable. |
Version | CSS1 |
Syntaxe DOM | object.style.borderLeftWidth = "4px"; |
Syntaxe
border-left-width: medium | thin | thick | length | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
padding: 10px;
border-style: dashed;
border-left-width: thick;
}
</style>
</head>
<body>
<h2>Exemple de border-left-width </h2>
<p>Comme vous le voyez, la largeur de la bordure gauche est définie thick.</p>
</body>
</html>
Voyons un autre exemple avec l'utilisation des tous les valeurs de la propriété:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>
<h2>Exemples des valeurs de border-left-width</h2>
<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>
</div>
</main>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
medium | Définit une bordure gauche moyenne. Valeur par défaut. |
thin | Définit une bordure gauche mince. Il appartient à l'argent utilisateur de déterminer la largeur exacte. |
thick | Définit une bordure gauche épaise. Il appartient à l'argent utilisateur de déterminer la largeur exacte. |
length | Définit l'épaisseur de la bordure. Par exemple, 10px, 5em, 8pt, etc. |
initial | Définit la valeur initiale. |
inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
1+ | 1+ | 1+ | 3.5+ |
Pratiquez vos connaissances
Quels sont les possibles valeurs pour la propriété 'border-left-width' en CSS?
Correcte!
Incorrecte!