Propriedade CSS border-left-width

A propriedade CSS border-left-width define a largura (espessura) da borda esquerda de um elemento. É a contraparte de lado único de border-width, permitindo controlar apenas a borda esquerda sem afetar as bordas superior, direita ou inferior.

A largura da borda esquerda — assim como todos os outros lados da borda — também pode ser definida com as propriedades abreviadas border ou border-width. Use border-left-width quando precisar estilizar apenas a borda esquerda, um padrão comum em barras laterais, citações em bloco e faixas decorativas ao lado de um elemento.

Por que a borda deve existir primeiro

A largura de uma borda não tem efeito visível por si só. O navegador só renderiza uma borda quando um border-style é definido (o estilo padrão é none), portanto, uma declaração como border-left-width: thick; não faz nada até que você também defina um estilo. Defina-o com border-left-style ou com a propriedade abreviada border-style:

/* width alone — nothing renders, because the style is still `none` */
.box {
  border-left-width: thick;
}

/* correct — a style is present, so the 5px left border is painted */
.box {
  border-left-style: solid;
  border-left-width: 5px;
  border-left-color: teal;
}

O mesmo se aplica à cor: se você omitir border-left-color, a borda usará o currentColor do elemento (sua cor de texto).

Informação

A especificação não define a espessura exata de cada palavra-chave. No entanto, elas sempre seguem esta ordem: thin ≤ medium ≤ thick.

Informação

A especificação não define como as bordas de diferentes larguras e estilos se conectam nos cantos.

Valor Inicial	medium
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não
Animável	Sim. A largura da borda é animável.
Versão	CSS1
Sintaxe DOM	object.style.borderLeftWidth = "4px";

Sintaxe

Sintaxe da Propriedade CSS border-left-width

border-left-width: medium | thin | thick | length | initial | inherit;

Exemplo da propriedade border-left-width com o valor "thick":

Exemplo da Propriedade CSS border-left-width com o valor thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 10px;
        border-style: dashed;
        border-left-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-width example</h2>
    <p>As you can see the width of the left border is set to thick.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade border-left-width com todos os valores:

Exemplo da Propriedade CSS border-left-width com os valores medium, thin, thick, px, initial e inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-width example classes */
      .b1 {
        border-left-width: medium;
      }
      .b2 {
        border-left-width: thin;
      }
      .b3 {
        border-left-width: thick;
      }
      .b4 {
        border-left-width: 10px;
      }
      .b5 {
        border-left-width: initial;
      }
      .b6 {
        border-left-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Experimente Você Mesmo »

Resultado

![Propriedade CSS border-left-width](/uploads/media/default/0001/03/6406dd863a4db0df218023217fcf17f182a53660.png "CSS border-left-width Property" =420x)

Valores

Valor	Descrição	Experimente
medium	Define a borda esquerda com espessura média. É o valor padrão desta propriedade.	Experimente »
thin	Define uma borda esquerda fina. Cabe ao agente do usuário determinar a largura exata.	Experimente »
thick	Define uma borda esquerda grossa. Cabe ao agente do usuário determinar a largura exata.	Experimente »
length	Define o comprimento da espessura da borda esquerda. Por exemplo, 10px, 5em, 8pt, etc.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Informação

Porcentagens não são permitidas para larguras de borda — border-left-width: 50% é inválido e a declaração é ignorada. Use um comprimento fixo (px, em, rem) ou uma das palavras-chave.

Pontos importantes

Um estilo é obrigatório. A largura e a cor ficam inativas até que border-style seja definido com um valor diferente de none.
A espessura das palavras-chave é definida pelo navegador. thin, medium e thick não têm valores de pixel fixos na especificação; eles apenas garantem a ordem thin ≤ medium ≤ thick. Para designs precisos em pixels, use um comprimento explícito.
Afeta o layout. A largura da borda é somada ao tamanho renderizado do elemento, a menos que box-sizing esteja definido como border-box, caso em que a borda é desenhada dentro da largura declarada.
Animável. O valor pode ser transicionado e animado, o que torna border-left-width útil para efeitos de faixa ao passar o mouse.

Propriedades relacionadas

border-left-style e border-left-color — as outras duas partes da borda esquerda.
border-left — a propriedade abreviada para largura, estilo e cor do lado esquerdo em uma única declaração.
border-right-width, border-top-width, border-bottom-width — o mesmo controle para os outros lados.

Prática

Quais dos seguintes valores podem ser usados com a propriedade border-left-width em CSS?

Valores de comprimentoValores de porcentagemInheritInitialAuto