Propriedade CSS border-left
O atalho CSS border-left define a largura, estilo e cor da borda esquerda de um elemento em uma declaração, com exemplos e valores.
A propriedade CSS border-left define a largura, o estilo de linha e a cor da borda esquerda de um elemento em uma única declaração.
É um atalho para essas três propriedades individuais:
- border-left-width — a espessura da borda (ex.:
2px,thin,medium,thick). - border-left-style — o estilo de linha (ex.:
solid,dotted,dashed,double,ridge). - border-left-color — a cor da linha.
Por que usar border-left
Use border-left quando quiser uma borda apenas na borda esquerda de um elemento em vez de nos quatro lados. É um padrão comum para blockquotes, barras laterais, indicadores de navegação e caixas de "destaque", onde uma única linha de acento marca o lado esquerdo de um bloco. Por ser um atalho, é mais conciso do que escrever as três propriedades individuais separadamente, e também redefine qualquer valor omitido para o seu padrão.
Como os valores funcionam
Os três valores podem ser escritos em qualquer ordem, e um ou dois deles podem ser omitidos:
- Se você omitir a cor, a borda usará a propriedade color do elemento — ou seja, a mesma cor do texto (a palavra-chave CSS global
currentColor). - Se você omitir a largura, ela assume o padrão
medium(aproximadamente 3–4px, dependendo do navegador). - Se você omitir o estilo, ele assume o padrão
none, o que significa que nenhuma borda será desenhada — portanto, uma declaração comoborder-left: 5px blue;não exibe nada. O estilo é o valor que você quase sempre precisa incluir.
| Valor Inicial | medium none currentColor |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não |
| Animável | Sim. A cor e a largura da borda são animáveis. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderLeft = "1px solid black"; |
Sintaxe
Sintaxe do border-left
border-left: border-width border-style border-color | initial | inherit;Exemplo da propriedade border-left:
Exemplo da propriedade CSS border-left com valor solid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-left: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-left example</h2>
<div> This is a simple example for the border-left property.</div>
</body>
</html>Resultado
Exemplo da propriedade border-left aplicada a diferentes elementos:
Exemplo da propriedade CSS border-left com valores dotted, double e solid
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-left: 5px solid #8ebf42;
}
p {
border-left: 4px dotted #1c87c9;
}
div {
border-left: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green left border</h1>
<p>A heading with a dotted blue left border.</p>
<div>A div element with a thick double left border.</div>
</body>
</html>Neste próximo exemplo, uma caixa é criada com o elemento <div>, com um background-color definido na caixa e uma borda esquerda ridge. Note que os estilos ridge, groove, inset e outset derivam seu sombreamento 3D da cor da borda, portanto ficam melhores contra um fundo contrastante.
Exemplo da propriedade border-left com o elemento <div>:
Exemplo da propriedade CSS border-left com valor ridge
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-left: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the left side.</p>
</div>
</body>
</html>Nota sobre propriedade lógica
border-left é uma propriedade física — ela sempre tem como alvo a borda esquerda, independentemente da direção de escrita do texto. Se você quiser que a borda siga o início do texto (a borda esquerda em idiomas da esquerda para a direita, a borda direita em idiomas da direita para a esquerda), use a propriedade lógica border-inline-start. Para a maioria dos layouts em português da esquerda para a direita, as duas se comportam da mesma forma, mas as propriedades lógicas fazem o layout se adaptar automaticamente quando a direção muda.
Valores
O atalho border-left aceita os valores de suas três propriedades individuais, além das palavras-chave CSS globais:
| Valor | Descrição |
|---|---|
| border-left-width | Define a largura da borda esquerda de um elemento. O valor padrão é "medium". Valor obrigatório. |
| border-left-style | Define o estilo de linha da borda esquerda de um elemento. O valor padrão é "none". Valor obrigatório. |
| border-left-color | Define a cor da borda esquerda de um elemento. O valor padrão é a cor atual do texto. |
| initial | Define a propriedade para o seu valor padrão. |
| inherit | Herda a propriedade do seu elemento pai. |