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
A border-left é uma propriedade shorthand em CSS que define todas as propriedades da border 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 class="default-example" id="default-example">
<div class="transition-all" id="example-element">
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 de border-left-style dado antes de border-left é ignorado. Uma vez que o valor padrão de border-left-style é none, não especificar a parte border-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
<br-width>-
Veja
border-left-width. <br-style>-
Veja
border-left-style. <color>-
Veja
border-left-color.
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 |
Compatibilidade com navegadores
Loading…