border-left
===========

Resumo
------

A **`border-left`** é uma propriedade shorthand em CSS que define todas as propriedades da `border` (en-US) 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` (en-US) dado antes de `border-left` é ignorado. Uma vez que o valor padrão de `border-left-style` (en-US) é `none`, não especificar a parte `border-style` resulta em nenhuma borda.

Propriedades constituintes
--------------------------

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

* `border-left-color` (en-US)
* `border-left-style` (en-US)
* `border-left-width` (en-US)
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` (en-US).

`<br-style>`

Veja `border-left-style` (en-US).

`<color>`

Veja `border-left-color` (en-US).

Definição formal
----------------

|  |  |
| --- | --- |
| 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` (en-US): `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` (en-US): computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-left-color` (en-US): a color
* `border-left-style` (en-US): discrete
* `border-left-width` (en-US): a length
 |

Sintaxe formal
--------------
```

border-left =   
  <line-width>  || (en-US)  
  <line-style>  || (en-US)  
  <color>         
  
<line-width> =   
  <length [0,∞]>  | (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    
  
```

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 with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `border` (en-US)
* `border-block` (en-US)
* `outline`
* Planos de fundo e bordas (en-US)
* Aprenda CSS: planos de fundo e bordas (en-US)