Propriété CSS border-left

❮ Précédent Suivant ❯

La propriété CSS border-left est utilisée pour définir la largeur, le style de ligne et la couleur de la bordure gauche des éléments.

C'est une propriété raccourcie pour la spécification des valeurs border-left-width, border-left-style et border-left-color.

Ces trois valeurs de la propriété raccourcie peuvent être spécifiées dans n'importe quel ordre, et certains entre elles peuvent être manquées.

S'il n'y a aucune couleur spécifiée, la valeur sera prise de la propriété color. Si la propriété color n'est pas définie, elle sera noir par défaut.

Si la valeur width n'est pas spécifiée, elle sera un élément de la taille moyenne.

Valeur Initiale	medium none currentColor
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Hérité	Non
Animable	Oui. La largeur et la couleur de la bordure sont animables.
Version	CSS1
Syntaxe DOM	object.style.borderLeft = "1px solid black";

Syntaxe

border-left: border-width border-style border-color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      border-left: 3px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple border-left</h2>
    <div> C'est un exemple de la propriété border-left.</div>
  </body>
</html>

Essayez-vous-même!

La propriété border-left peut être appliquée aux différents éléments.

Exemple

<!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>Un titre avec une bordure supérieure verte et solide.</h1>
    <p>Un titre avec une bordure bleue en pointillé (dotted).</p>
    <div>Un élément div avec une double bordure épaise.</div>
  </body>
</html>

Essayez-vous-même!

Vous pouvez créer une boîte avec un élément <div> et définir une background-color pour votre boîte et définir la bordure supérieure.

Exemple

<!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>Cette boîte a une bordure de crête sur le dessus.</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
border-left-width	Définit la largeur de la bordure supérieure d'élément. La valeur par défaut est "medium". Valeur requise.
border-left-style	Définit le style de ligne de la bordure supérieure d'élément. La valeur par défaut est "none". Valeur requise.
border-left-color	Définit la couleur de la bordure supérieure d'élément. La valeur par défaut est la couleur actuelle de texte.
initial	Définit la valeur par défaut.
inherit	Hérite la propriété de l'élément parent.