Propriedade de Cor da Borda
Última atualização: 2026-09-13
border-color Propriedade de Cor da Borda
A propriedade border-color define a cor da borda de um elemento. Aceita todo formato de cor do CSS, incluindo nomes de cores, valores hex, rgb(), rgba(), hsl() e mais. Usada sozinha, afeta apenas a cor da borda, não a largura ou o estilo.
| Categoria | |
|---|---|
| Valor Inicial | currentcolor |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | color |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
border-color: <color>{1,4};⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<color> | Tipo | Valor de cor da borda |
transparent | Palavra-chave | Borda transparente |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： A propriedade border-color aceita de 1 a 4 valores para que você possa dar a cada borda uma cor diferente, por exemplo: border-color: red green blue orange.
Dica： Use transparent para criar uma borda invisível, frequentemente para reservar espaço para que adicionar uma borda no hover não desloque o layout.
❓ Perguntas Frequentes
QQual é o valor padrão de border-color?
AO padrão é currentcolor, o que significa que a borda usa automaticamente a cor de texto atual do elemento (o valor da propriedade color). Portanto, se você definir apenas border-width e border-style sem cor, a borda segue a cor do texto. Para manter a borda independente do texto, especifique uma cor explicitamente, por exemplo border-color: #333;.
QComo dar cores diferentes às quatro bordas?
AA propriedade border-color aceita de 1 a 4 valores atribuídos no sentido horário a partir do topo: um valor colore todos os lados, dois valores correspondem a superior/inferior e esquerda/direita, três a superior, esquerda/direita e inferior, e quatro a topo, direita, inferior, esquerda. Por exemplo, border-color: red green blue orange;. Ou use propriedades por lado como border-top-color para controle preciso.
QQuais formatos de cor border-color suporta?
ATodos os formatos de cor do CSS: palavras-chave (red, transparent), códigos hex (#9b59b6, #f00), rgb()/rgba(), hsl()/hsla() e currentcolor. rgba() cria bordas semitransparentes, transparent é um espaço reservado invisível comum, e hsla() permite ajustar o alfa mantendo o matiz.
QComo usar uma borda transparente para evitar deslocamento de layout no hover?
APrimeiro reserve o espaço com border: 2px solid transparent;, depois altere apenas a cor no hover, por exemplo border-color: #3498db;. Como a borda sempre existe, o tamanho do elemento nunca muda e o layout não salta. Este é o truque padrão contra deslocamento para links de navegação e botões.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
