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:
|
---|---|
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
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)
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) |