Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
border-left
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
Resumo
Aborder-left é umapropriedade shorthand emCSS que define todas as propriedades daborder esquerda de um elemento.
Experimente
border-left: solid;border-left: dashed red;border-left: 1rem solid;border-left: thick double #32a1ce;border-left: 4mm ridge rgba(211, 220, 50, 0.6);<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #8b008b; padding: 0.75em; width: 80%; height: 100px;}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:
border-left-style: dotted;border-left: thick green;É na verdade o mesmo que:
border-left-style: dotted;border-left: none thick green;O valor deborder-left-style dado antes deborder-left é ignorado. Uma vez que o valor padrão deborder-left-style énone, não especificar a parteborder-style resulta em nenhuma borda.
Propriedades constituintes
Essa propriedade é uma abreviação das seguintes propriedades CSS:
Sintaxe
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
Definição formal
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Aplica-se a | all elements. It also applies to::first-letter. |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Sintaxe formal
border-left =
<line-width>||
<line-style>||
<color>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
Exemplos
Aplicando uma borda esquerda
HTML
<div>Essa caixa tem uma borda no seu lado esquerdo.</div>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 |