Propriedade CSS border-left-color
A propriedade border-left-color define a cor da borda esquerda de um elemento. Veja todos os valores com exemplos.
A propriedade CSS border-left-color define a cor da borda esquerda de um elemento. Ela controla apenas a cor — a borda também precisa de um estilo e uma largura para ser visível.
Esta página aborda a sintaxe de border-left-color, por que um estilo de borda é necessário para que ela apareça, e exemplos práticos para cada tipo de valor de cor (cores nomeadas, hexadecimal, RGB, HSL e transparent).
Por que um estilo de borda é necessário
Uma borda tem três ingredientes: estilo, largura e cor. Por padrão, o estilo da borda é none, o que significa que o navegador não desenha nenhuma borda — portanto, definir apenas border-left-color não produz nada visível.
Para que a borda esquerda apareça, defina um estilo primeiro com border-style ou border-left-style, e depois aplique a cor:
.box {
border-left-style: solid; /* required, otherwise the border is invisible */
border-left-width: 4px; /* optional; defaults to medium */
border-left-color: #1c87c9;
}Se você também quiser colorir as bordas superior, direita e inferior, o atalho border-color define os quatro lados de uma só vez. A largura é controlada separadamente com border-width ou border-left-width (a largura padrão é medium).
O valor inicial é currentColor, ou seja, até que você defina uma cor, a borda assume o próprio valor de color do elemento.
Resumo da propriedade
| Valor inicial | currentColor |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdada | Não |
| Animável | Sim. A cor da borda esquerda é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderLeft = "1px solid black"; |
Sintaxe
border-left-color: color | transparent | initial | inherit;Exemplos
Colorindo a borda esquerda de forma diferente das outras
Este exemplo desenha uma borda sólida em todos os lados com border-color, e então substitui apenas o lado esquerdo para que ele se destaque:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-left-color example</h2>
<div>Example for the border-left-color property with different left border color.</div>
</body>
</html>Resultado:
Usando o valor "transparent"
Uma borda esquerda transparent é invisível, mas ainda ocupa o espaço definido pela largura da borda. Isso é útil para manter layouts alinhados ou para criar efeitos visíveis ao passar o cursor:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent left border</h2>
</body>
</html>Você pode definir a cor como uma cor nomeada, um código hexadecimal, ou um valor rgb(), rgba(), hsl() ou hsla(). Os exemplos abaixo mostram os formatos mais comuns.
Valor de cor nomeada
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>Border-left-color property with a named color value.</div>
</body>
</html>Valor hexadecimal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-left-color property with a hexadecimal value.</div>
</body>
</html>Valor RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-left-color property with a RGB value.</div>
</body>
</html>Valor HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-left-color property with a HSL value.</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| color | Define a cor da borda esquerda. A cor padrão é a cor do elemento atual. Podem ser usados nomes de cores, códigos hexadecimais, rgb(), rgba(), hsl(), hsla(). Valor obrigatório. | Experimente » |
| transparent | Aplica uma cor transparente à borda esquerda. A borda esquerda ainda ocupará o espaço definido pelo valor de border-width. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
- border-color — atalho para as quatro cores de borda
- border-left-style — define o estilo da borda esquerda (necessário para a cor aparecer)
- border-left-width — define a largura da borda esquerda
- border-right-color, border-top-color, border-bottom-color — colore os outros lados