This page was translated from English by the community. Learn more and join the MDN Web Docs community.

border-left

Resumo

O propriedade border-left CSS é um atalho que define os valores de border-left-color, border-left-style (en-US), e border-left-width (en-US). Estas propriedades descrevem a borda esquerda de elementos.

Os três valores da propriedade estenográfica pode ser especificada em qualquer ordem, e um ou dois deles podem ser omitidos.

Tal como acontece com todas as propriedades abreviadas, fronteira esquerda sempre define os valores de todas as propriedades que podem ser definidas, ainda que não são especificadas. Ele define aqueles que não são especificados para os valores padrão. Isso significa que: 
  border-left-style: dotted;
  border-left: thick green;

é o mesmo que

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

e o valor de border-left-style (en-US) dado antes border-left é ignorado.

Uma vez que o valor padrão de border-left-style (en-US) é none, não especificando o border-style parte do valor significa que a propriedade especifica o valor padrão que é none e não significa nenhum border.

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

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

Valores

<br-width> 
Veja border-left-width (en-US).
<br-style> 
Veja border-left-style (en-US).
<color> 
Veja border-left-color.

Sintaxe formal

<line-width> || (en-US) <line-style> || (en-US) <color>
where 
<line-width> = <length> (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
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
where 
<rgb()> = rgb( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
where 
<alpha-value> = <number> | (en-US) <percentage> (en-US)
<hue> = <number> | (en-US) <angle> (en-US)

Exemplo

HTML

<div class='box'>
  <p>This box has a border on the left side.</p>
</div>

CSS

.box {
  background-color: #ffaabb;
  border-left: 4px solid #000;
  height: 100px;
  width: 100px;
}

.box p {
  font-weight: bold;
  text-align: center;
}

Especificações

Especificação Status Comentário
CSS Backgrounds and Borders Module Level 3
The definition of 'border-left' in that specification.		 Candidata a Recomendação Não ocorreram alterações diretas, através da alteração dos valores para o border-left-color se aplicam a ele.
CSS Level 2 (Revision 1)
The definition of 'border-left' in that specification.		 Recomendação Sem alterações significativas
CSS Level 1
The definition of 'border-left' in that specification.		 Recomendação Definição inicial

Compatibilidade do browser

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico 1.0 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 1.0 1.0 (1.0) (Yes) (Yes) (Yes)