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 value	as each of the properties of the shorthand: border-left-width (en-US): `medium` border-left-style (en-US): `none` `border-left-color`: `currentcolor`
Aplica-se a	all elements. It also applies to `::first-letter`.
Inherited	não
Computed value	as each of the properties of the shorthand: border-left-width (en-US): the absolute length or `0` if border-left-style (en-US) is `none` or `hidden` border-left-style (en-US): as specified `border-left-color`: computed color
Animation type	as each of the properties of the shorthand: `border-left-color`: a color border-left-style (en-US): discrete border-left-width (en-US): a length

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

border-left = 
  <line-width>  ||
  <line-style>  ||
  <color>       

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

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

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<rgb()> = 
  rgb( [ <percentage> (en-US) | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> (en-US) | none ] [ <percentage> (en-US) | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> (en-US) | none ] [ <percentage> (en-US) | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage> (en-US)  

<alpha-value> = 
  <number>      |
  <percentage> (en-US)  

<hue> = 
  <number>  |
  <angle> (en-US)   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> (en-US) | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

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)

Desktop
Dispositivo móvel

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)