Propriedade CSS border-color
A propriedade CSS border-color é um atalho que aplica cor aos quatro lados de um elemento. Veja os valores e exemplos.
A propriedade CSS border-color define a cor da borda de um elemento. É um atalho que permite definir a cor dos quatro lados de uma vez, ou atribuir uma cor diferente a cada lado. Ela corresponde às quatro propriedades individuais:
Esta página aborda a sintaxe, as formas de um a quatro valores, os formatos de cor aceitos e os erros comuns que tornam a cor da borda invisivelmente ausente.
Quando a cor aparece
border-color só pinta uma borda se houver de fato uma borda para pintar. A cor é usada em conjunto com as propriedades border-style e border-width. A borda permanece invisível se:
border-stylefornoneouhidden(o padrão énone), ouborder-widthfor0.
Em outras palavras, definir apenas border-color não tem efeito — você sempre precisa de um estilo. A maioria das pessoas define os três de uma vez com o atalho border.
Esta propriedade aceita qualquer valor de cor CSS. O padrão é currentColor, o que significa que a borda herda o valor de color do elemento, a menos que você o substitua.
As formas de um a quatro valores
border-color segue o padrão CSS padrão de atalho por lado, de modo que o número de valores passados determina a quais lados eles se aplicam:
| Valores | topo | direita | base | esquerda |
|---|---|---|---|---|
red | red | red | red | red |
red green | red | green | red | green |
red green blue | red | green | blue | green |
red green blue gold | red | green | blue | gold |
Uma forma fácil de lembrar a ordem de quatro valores é "sentido horário a partir do topo": topo, direita, base, esquerda.
Resumo da propriedade
| Valor inicial | currentColor |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. As bordas do bloco são animáveis. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderColor = "red"; |
Sintaxe
Sintaxe da propriedade CSS border-color
border-color: color | transparent | initial | inherit;Exemplos
Uma única cor para todos os lados
Quando você passa um valor, ele define a cor dos quatro lados do elemento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.dotted {
border-style: dotted;
border-color: #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<div class="dotted">Example with blue dotted border.</div>
</body>
</html>Resultado
Uma cor diferente por lado
Aqui são aplicados quatro valores: o primeiro para a borda superior, o segundo para a direita, o terceiro para a base e o quarto para a esquerda.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
border-style: solid;
border-color: #1c87c9 cyan yellow #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<div class="solid">Example with border-color property.</div>
</body>
</html>Usando diferentes formatos de cor
Você pode definir uma cor hexadecimal, RGB, RGBA, HSL, HSLA ou um nome de cor como valor de border-color. O exemplo abaixo usa um de cada.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-color: lightblue;
}
.hex {
border-color: #1c87c9;
}
.rgb {
border-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Border with a named color.</p>
<p class="hex">Border with a hexadecimal value.</p>
<p class="rgb">Border with a RGB color value.</p>
<p class="hsl">Border with a HSL color value.</p>
</body>
</html>Saiba mais sobre os formatos de cor suportados pelo CSS em HTML Colors.
Valores
| Valor | Descrição | Experimentar |
|---|---|---|
| color | Define uma cor para as bordas. A cor padrão é a cor atual do elemento. Nomes de cores, códigos hexadecimais, rgb(), rgba(), hsl(), hsla() podem ser usados. Opcional. O padrão é currentColor. | Experimentar » |
| transparent | Torna a cor da borda transparente. | Experimentar » |
| initial | Define a propriedade com seu valor padrão. | Experimentar » |
| inherit | Herda a propriedade do elemento pai. |