border-left

Exemple interactif

border-left: solid;

border-left: dashed red;

border-left: 1rem solid;

border-left: thick double #32a1ce;

border-left: 4mm ridge rgb(211 220 50 / 0.6);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec une bordure autour.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• border-left-color
• border-left-style
• border-left-width

Syntaxe

border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;

/* Valeurs globales */
border-left: inherit;
border-left: initial;
border-left: revert;
border-left: revert-layer;
border-left: unset;

Les trois valeurs de la propriété raccourcie peuvent être placées dans n'importe quel ordre et une ou deux d'entre elles peuvent être omises.

Valeurs

<br-width>

Voir border-left-width.

<br-style>

Voir border-left-style.

<color>

Voir border-left-color.

Description

Comme pour toutes les propriétés raccourcies, border-left définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si elles ne sont pas définies. Celles qui ne sont pas définies prennent leur valeur par défaut. Considérez le code suivant :

border-left-style: dotted;
border-left: thick green;

Cela revient en fait au même que :

border-left-style: dotted;
border-left: none thick green;

La valeur de border-left-style fournie avant border-left est ignorée. Comme la valeur par défaut de border-left-style est none, si vous n'indiquez pas la partie border-style, il n'y aura pas de bordure.

Définition formelle

Syntaxe formelle

border-left = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

Exemples

Appliquer une bordure à gauche

HTML

<div>Ceci est une boîte avec une bordure à gauche.</div>

CSS

div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété border
• La propriété border-block
• La propriété outline
• Arrière-plans et bordures
• Apprendre CSS : arrière-plans et bordures