MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

border-left

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:
Animatableas 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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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.		 Candidate Recommendation 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.		 Recommendation Sem alterações significativas
CSS Level 1
The definition of 'border-left' in that specification.		 Recommendation Definição inicial

Compatibilidade do browser

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,