Propriété CSS border-left
La propriété CSS border-left permet de définir la largeur, le style de ligne et la couleur de la bordure gauche des éléments.
Il s'agit d'une propriété raccourcie permettant de spécifier les valeurs suivantes :
Ces trois valeurs de la propriété raccourcie peuvent être spécifiées dans n'importe quel ordre, et l'une ou deux d'entre elles peuvent être omises.
S'il n'y a pas de couleur spécifiée, la valeur sera prise de la propriété color. Si la propriété color n'est pas définie, elle prendra par défaut la couleur actuelle.
Si la width n'est pas spécifiée, elle prendra la taille moyenne de l'élément.
| Valeur initiale | medium none currentColor |
|---|---|
| S'applique à | Tous les éléments. Il s'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Oui. La couleur et la largeur de la bordure sont animables. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderLeft = "1px solid black"; |
Syntaxe
Syntaxe de border-left
border-left: border-width border-style border-color | initial | inherit;Exemple de la propriété border-left :
Exemple de la propriété CSS border-left avec une valeur solide
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-left: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-left example</h2>
<div> This is a simple example for the border-left property.</div>
</body>
</html>Résultat
Exemple de la propriété border-left appliquée à différents éléments :
Exemple de la propriété CSS border-left avec des valeurs en pointillés, double et solide
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-left: 5px solid #8ebf42;
}
p {
border-left: 4px dotted #1c87c9;
}
div {
border-left: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green left border</h1>
<p>A heading with a dotted blue left border.</p>
<div>A div element with a thick double left border.</div>
</body>
</html>Créez un conteneur avec l'élément <div> et définissez une background-color pour votre conteneur et une bordure gauche.
Exemple de la propriété border-left avec l'élément <div> :
Exemple de la propriété CSS border-left avec une valeur en crête
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-left: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the left side.</p>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| border-left-width | Définit la largeur de la bordure gauche d'un élément. La valeur par défaut est « medium ». Valeur requise. |
| border-left-style | Définit le style de ligne de la bordure gauche d'un élément. La valeur par défaut est « none ». Valeur requise. |
| border-left-color | Définit la couleur de la bordure gauche d'un élément. La valeur par défaut est la couleur actuelle du texte. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété border-left en CSS ?