border-left

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Resumo

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

Experimente

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:

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

É na verdade o mesmo que:

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

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

Propriedades constituintes

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

Sintaxe

css
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.

Valores

<br-width>

Veja border-left-width.

<br-style>

Veja border-left-style.

<color>

Veja border-left-color.

Definição formal

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements. It also applies to ::first-letter.
Inheritednão
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Sintaxe formal

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

Exemplos

Aplicando uma borda esquerda

HTML

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

CSS

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

Resultado

Especificações

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também