border-left

Ir para:
  1. Resumo
  2. Sintaxe
  3. Exemplo
  4. Especificações
  5. Compatibilidade do browser

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Resumo

O propriedade border-left CSS é um atalho que define os valores de border-left-color, border-left-style, e border-left-width. 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 dado antes border-left é ignorado.

Uma vez que o valor padrão de border-left-style é 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
Midiavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Sintaxe

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

Valores

<br-width> 
Veja border-left-width.
<br-style> 
Veja border-left-style.
<color> 
Veja border-left-color.

Sintaxe formal

<br-width> || <br-style> || <color>
where 
<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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)

Etiquetas do documento e colaboradores

Colaboradores desta página: juliocarneiro
Última atualização por: juliocarneiro,