Propriedade CSS border-left-style

A propriedade CSS border-left-style define o estilo da borda esquerda de um elemento. Ela aceita uma única palavra-chave escolhida do mesmo conjunto de valores disponíveis para o atalho border-style. Ao contrário de border-style, que define o estilo para todos os quatro lados de uma vez, border-left-style afeta apenas a borda esquerda.

Esta propriedade combina com border-left-width e border-left-color, ou você pode definir as três ao mesmo tempo com o atalho border-left. Uma borda só é visível quando seu estilo é definido como algo diferente do valor padrão none — mesmo uma largura generosa e uma cor forte não renderizam nada até que um estilo seja aplicado.

A largura padrão da borda esquerda é medium. Ajuste-a com a propriedade border-left-width ou border-width.

Nem todos os navegadores renderizam o mesmo estilo de forma idêntica. O Chrome, por exemplo, desenha os pontos de uma borda dotted como pequenos quadrados em vez de círculos, e os valores 3D (groove, ridge, inset, outset) dependem da cor da borda para produzir seu efeito de luz e sombra.

Informação

A especificação não define a quantidade de espaçamento entre os pontos e os traços.

Informação

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

Valor Inicial	none
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não
Animável	Não
Versão	CSS1
Sintaxe DOM	object.style.borderLeftStyle = "solid";

Sintaxe

Sintaxe da Propriedade CSS border-left-style

border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Exemplo da propriedade border-left-style:

Exemplo da Propriedade CSS border-left-style com os valores solid e dotted

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-left-style: solid;
      }
      div {
        border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Example with solid border-left-style.</p>
    <div>Example with dotted border-left-style.</div>
  </body>
</html>

Experimente Você Mesmo »

Informação

Dependendo do valor de border-color, os efeitos dos valores groove, ridge, inset e outset podem ser alterados.

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

Exemplo da Propriedade CSS border-left-style com os valores hidden, dotted, dashed, solid, double, groove, ridge, inset e outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #c9c5c5;
        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;
        background-color: #8ebf42;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-style example classes */
      .b1 {
        border-left-style: hidden;
      }
      .b2 {
        border-left-style: dotted;
      }
      .b3 {
        border-left-style: dashed;
      }
      .b4 {
        border-left-style: solid;
      }
      .b5 {
        border-left-style: double;
      }
      .b6 {
        border-left-style: groove;
      }
      .b7 {
        border-left-style: ridge;
      }
      .b8 {
        border-left-style: inset;
      }
      .b9 {
        border-left-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Valores

Valor	Descrição	Experimente
none	Define que não haverá borda. Valor padrão.
hidden	Igual a `none`, exceto na resolução de conflito de bordas em elementos de tabela, onde remove completamente a borda esquerda da renderização.
dotted	Define uma borda pontilhada.
dashed	Define uma borda tracejada.
double	Define uma borda dupla.
solid	Define uma borda sólida.
groove	Define uma borda 3D com efeito de sulco. Seu efeito pode ser alterado com o valor de border-color.
ridge	Define uma borda 3D com efeito de crista. Seu efeito pode ser alterado com o valor de border-color.
inset	Define uma borda 3D com efeito de recuo. Seu efeito pode ser alterado com o valor de border-color.
outset	Define uma borda 3D com efeito de relevo. Seu efeito pode ser alterado com o valor de border-color.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Quando usar

Use border-left-style quando quiser um destaque estilizado apenas na borda esquerda — um padrão comum para blockquotes, cartões de aviso e itens ativos em barras laterais, onde uma única barra colorida marca o elemento sem enquadrá-lo completamente. Para o mesmo efeito nos outros lados, use border-top-style, border-right-style ou border-bottom-style. Quando todos os quatro lados compartilham o mesmo estilo, o atalho border-style é mais conciso.

Prática

Quais valores a propriedade 'border-left-style' do CSS pode assumir?