border-left

A border-left é uma propriedade shorthand em CSS que define todas as propriedades da border (en-US) esquerda de um elemento.

Tal como acontece com todas as propriedades abreviadas, border-left sempre define os valores de todas as propriedades que possam ser definidas, ainda que estas não tenham sido especificadas. Ela define aquelas que não forem especificadas para os valores padrão. Considere o código a seguir:

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

É na verdade o mesmo que:

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

O valor de border-left-style (en-US) dado antes de border-left é ignorado. Uma vez que o valor padrão de border-left-style (en-US) é none, não especificar a parte border-style resulta em nenhuma borda.

Essa propriedade é uma abreviação das seguintes propriedades CSS:

• border-left-color (en-US)
• border-left-style (en-US)
• border-left-width (en-US)

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

/* Global values */
border-left: inherit;
border-left: initial;
border-left: revert;
border-left: revert-layer;
border-left: unset;

Os três valores da propriedade abreviada podem ser especificados em qualquer ordem, e um ou dois deles podem ser omitidos.

<br-width>

Veja border-left-width (en-US).

<br-style>

Veja border-left-style (en-US).

<color>

Veja border-left-color (en-US).

border-left = 
  <line-width>  || (en-US)
  <line-style>  || (en-US)
  <color>       

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

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

HTML

<div>Essa caixa tem uma borda no seu lado esquerdo.</div>

CSS

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

Resultado

• border (en-US)
• border-block (en-US)
• outline
• Planos de fundo e bordas (en-US)
• Aprenda CSS: planos de fundo e bordas (en-US)