W3docs
fr
Se connecter

Propriété CSS border-left

La propriété CSS border-left définit en une seule déclaration la largeur, le style et la couleur de la bordure gauche d'un élément.

La propriété CSS border-left définit la largeur, le style de ligne et la couleur de la bordure gauche d'un élément en une seule déclaration.

C'est une propriété raccourcie pour ces trois propriétés détaillées :

Pourquoi utiliser border-left

Utilisez border-left lorsque vous souhaitez une bordure uniquement sur le bord gauche d'un élément plutôt que sur les quatre côtés. C'est un motif courant pour les citations en bloc, les barres latérales, les indicateurs de navigation et les boîtes « callout » où une seule ligne d'accentuation marque le côté gauche d'un bloc. Étant une propriété raccourcie, elle est plus concise que d'écrire séparément les trois propriétés détaillées, et elle réinitialise également toute valeur omise à sa valeur par défaut.

Fonctionnement des valeurs

Les trois valeurs peuvent être écrites dans n'importe quel ordre, et une ou deux d'entre elles peuvent être omises :

  • Si vous omettez la couleur, la bordure utilise la propriété color de l'élément — c'est-à-dire la même couleur que son texte (le mot-clé CSS currentColor).
  • Si vous omettez la largeur, la valeur par défaut est medium (environ 3–4px selon le navigateur).
  • Si vous omettez le style, la valeur par défaut est none, ce qui signifie qu'aucune bordure n'est dessinée — ainsi une déclaration comme border-left: 5px blue; n'affiche rien. Le style est la valeur que vous devez presque toujours inclure.
Valeur initialemedium none currentColor
S'applique àTous les éléments. S'applique également à ::first-letter.
HéritéNon
AnimatableOui. La couleur et la largeur de la bordure sont animatables.
VersionCSS1
Syntaxe DOMobject.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 la valeur solid

<!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>
Essayez vous-même »

Résultat

Propriété CSS border-left

Exemple de la propriété border-left appliquée à différents éléments :

Exemple de la propriété CSS border-left avec les valeurs dotted, double et solid

<!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>
Essayez vous-même »

Dans l'exemple suivant, une boîte est créée avec l'élément <div>, avec une propriété background-color définie sur la boîte et une bordure gauche de type ridge. Notez que les styles ridge, groove, inset et outset tirent leur ombrage 3D de la couleur de la bordure, donc ils s'affichent mieux sur un arrière-plan contrasté.

Exemple de la propriété border-left avec l'élément <div> :

Exemple de la propriété CSS border-left avec la valeur ridge

<!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>
Essayez vous-même »

Note sur les propriétés logiques

border-left est une propriété physique — elle cible toujours le bord gauche quelle que soit la direction d'écriture du texte. Si vous souhaitez que la bordure suive le début du texte (le bord gauche dans les langues écrites de gauche à droite, le bord droit dans les langues écrites de droite à gauche), utilisez plutôt la propriété logique border-inline-start. Pour la plupart des mises en page anglaises de gauche à droite, les deux se comportent de la même façon, mais les propriétés logiques permettent à une mise en page de s'adapter automatiquement lorsque la direction change.

Valeurs

La propriété raccourcie border-left accepte les valeurs de ses trois propriétés détaillées, ainsi que les mots-clés CSS universels :

ValeurDescription
border-left-widthDéfinit la largeur de la bordure gauche d'un élément. La valeur par défaut est « medium ». Valeur obligatoire.
border-left-styleDéfinit le style de ligne de la bordure gauche d'un élément. La valeur par défaut est « none ». Valeur obligatoire.
border-left-colorDéfinit la couleur de la bordure gauche d'un élément. La valeur par défaut est la couleur courante du texte.
initialDéfinit la propriété à sa valeur par défaut.
inheritHérite de la propriété de son élément parent.

Pratique

Pratique
Que fait la propriété border-left en CSS ?
Que fait la propriété border-left en CSS ?
Was this page helpful?