Propriedade CSS border-top-color
A propriedade border-top-color define a cor da borda superior de um elemento. Veja todos os valores com exemplos.
A propriedade CSS border-top-color define a cor da borda superior de um elemento. Use-a quando quiser que a borda superior seja diferente dos outros três lados — por exemplo, uma barra de destaque colorida acima de um cartão ou de um cabeçalho de seção.
Uma borda possui três partes: seu estilo, largura e cor. A propriedade border-top-color controla apenas a cor. Por si só, ela não produz nenhum efeito visível, pois o valor padrão de border-style é none, o que remove a borda completamente. Portanto, você deve primeiro declarar um estilo para a borda superior — usando border-style ou border-top-style — para que a cor tenha algo a pintar.
Para definir as cores das quatro bordas ao mesmo tempo, em vez de apenas a superior, use o atalho border-color. As propriedades equivalentes para os outros lados são border-right-color, border-bottom-color e border-left-color.
A largura padrão da borda é medium. Você pode alterá-la com border-width ou border-top-width.
| Valor Inicial | currentColor |
|---|---|
| Aplicável a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não |
| Animável | Sim. A cor da borda superior é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderTopColor = "black"; |
Sintaxe
Sintaxe da Propriedade CSS border-top-color
border-top-color: color | transparent | initial | inherit;Exemplo da propriedade border-top-color:
Exemplo da Propriedade CSS border-top-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-top-color example</h2>
<div>Example for the border-top-color property with different top border color.</div>
</body>
</html>Resultado
Exemplo da propriedade border-top-color com o valor "transparent":
Exemplo da Propriedade CSS border-top-color com valor transparent
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding-bottom: 8px;
text-align: center;
border: 12px groove #1c87c9;
border-top-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent top border</h2>
</body>
</html>Valores hexadecimais, RGB, RGBA, HSL, HSLA ou nomes de cores podem ser usados como valor para a propriedade border-top-color.
Exemplo da propriedade border-top-color com um valor de cor nomeada:
Exemplo da Propriedade CSS border-top-color com valor darkred (cor nomeada)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: darkred;
}
</style>
</head>
<body>
<div>Border-top-color property with a named color value.</div>
</body>
</html>Exemplo da propriedade border-top-color com um valor hexadecimal:
Exemplo da Propriedade CSS border-top-color com valor hexadecimal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-top-color property with a hexadecimal value.</div>
</body>
</html>Exemplo da propriedade border-top-color com um valor RGB:
Exemplo da Propriedade CSS border-top-color com valor RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-top-color property with a RGB value.</div>
</body>
</html>Exemplo da propriedade border-top-color com um valor HSL:
Exemplo da Propriedade CSS border-top-color com valor HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: hsl(24, 80%, 50%);
}
</style>
</head>
<body>
<div>Border-top-color property with a HSL value.</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| color | Define a cor da borda superior. A cor padrão é a cor do elemento atual. Nomes de cores, códigos de cor hexadecimais, rgb(), rgba(), hsl(), hsla() podem ser usados. Valor obrigatório. | Experimente » |
| transparent | Aplica uma cor transparente à borda superior. A borda superior 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. |
Pontos importantes
- A cor sozinha não é suficiente. Como
border-styletem como padrãonone, a borda superior permanece invisível até que você defina um estilo (solid,dashed,groove, etc.). Sempre combineborder-top-colorcom um estilo. currentColoré o valor padrão. Se você nunca definirborder-top-color, a borda usará o valor decolordo elemento. Alterar acolordo texto também alterará a cor de uma borda sem estilo definido.transparentainda reserva espaço. Uma borda superior transparente mantém seuborder-top-width, portanto o layout não sofre deslocamento — útil para efeitos de hover que trocam uma borda transparente por uma visível.- Qualquer formato de cor funciona. Nomes de cores, hex (
#1c87c9),rgb(),rgba(),hsl()ehsla()são todos válidos. Usergba()/hsla()quando precisar de transparência parcial.
Propriedades relacionadas
- border-top — atalho para largura, estilo e cor da borda superior em uma única declaração.
- border-top-style e border-top-width — as outras duas partes da borda superior.
- border-color — define a cor das quatro bordas ao mesmo tempo.
- border-bottom-color, border-right-color, border-left-color — as propriedades de cor por lado para as outras bordas.