Atributo border-color do CSS

Definição e uso

A propriedade border-color define a cor das quatro bordas. Esta propriedade pode definir de 1 a 4 cores.

A propriedade border-color é uma propriedade abreviada que pode definir a cor de todas as partes visíveis das bordas de um elemento, ou definir diferentes cores para cada uma das quatro bordas. Veja o exemplo a seguir:

Exemplo 1

border-color:red green blue pink;
  • A borda superior é vermelha
  • A borda direita é verde
  • A borda inferior é azul
  • A borda esquerda é rosa

Exemplo 2

border-color:red green blue;
  • A borda superior é vermelha
  • A borda direita e esquerda são verdes
  • A borda inferior é azul

Exemplo 3

border-color:dotted red green;
  • A borda superior e inferior são vermelhas
  • A borda direita e esquerda são verdes

Exemplo 4

border-color:red;
  • Todas as 4 bordas são vermelhas

Lembre-se de que o estilo da borda não pode ser none ou hidden, caso contrário, a borda não aparecerá.

Notas:Sempre declare a propriedade border-style antes da propriedade border-color. O elemento deve obter a borda antes de mudar a cor.

Veja também:

Tutorial de CSS:Borda do CSS

Manual de referência do HTML DOM:Atributo borderColor

Exemplo

Definir a cor de 4 bordas:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Experimente você mesmo

Sintaxe CSS

border-color: cor|transparent|initial|inherit;

Valor do atributo

Valor Descrição
color_name Define a cor da borda com nome de cor (por exemplo, red).
hex_number Define a cor da borda com valor hexadecimal (por exemplo, #ff0000).
rgb_number Define a cor da borda com código rgb (por exemplo, rgb(255,0,0)).
transparent Valor padrão. A cor da borda é transparente.
inherit Definido que a cor da borda deve ser herdada do elemento pai.

Detalhes técnicos

Valor padrão: não especificado
Herança: não
Versão: CSS1
Sintaxe JavaScript: object.style.borderColor="#FF0000 blue"

Mais exemplos

Definir a cor de quatro bordas
Este exemplo mostra como definir a cor de quatro bordas. Pode ser definida uma a quatro cores.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Notas:O Internet Explorer 6 (e versões anteriores) não suporta o valor de atributo "transparent".

Notas:Os navegadores IE7 e anteriores não suportam o valor "inherit". O IE8 requer !DOCTYPE. O IE9 suporta "inherit".