Propriété CSS border-left

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>

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>

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>

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.

Support de Navigateurs

chrome firefox safari opera
1+ 1+ 3.5+ 1+

Pratiquez vos connaissances

Qu'est-ce que vous pouvez faire avec la propriété 'border-left' en CSS?
Trouvez-vous cela utile?