Propriedade Style borderColor

Definição e uso

borderColor A propriedade define ou retorna a cor da borda do elemento.

Esta propriedade pode usar de um a quatro valores:

  • Um valor, por exemplo: p {border-color: red} - todos os quatro bordas são vermelhas
  • Dois valores, por exemplo: p {border-color: vermelho transparente} - A borda superior e inferior são vermelhas e as bordas direita e esquerda são transparentes
  • Três valores, por exemplo: p {border-color: vermelho verde azul}- A borda superior é vermelha, as bordas direita e esquerda são verdes e a borda inferior é azul
  • Quatro valores, por exemplo: p {border-color: vermelho verde azul amarelo} - A borda superior é vermelha, a borda direita é verde, a borda inferior é azul e a borda esquerda é amarela

Veja também:

Tutorial de CSS:Borda do CSS

Manual do CSS:Propriedade border-color

Manual do HTML DOM:Propriedade de borda

Exemplo

Exemplo 1

Mude a cor da borda de todos os lados do elemento <div> para vermelho:

document.getElementById("myDiv").style.borderColor = "vermelho";

Experimente você mesmo

Exemplo 2

Mude a cor da borda superior do elemento <div> para verde e a cor da borda lateral para roxo:

document.getElementById("myDiv").style.borderColor = "verde roxo";

Experimente você mesmo

Exemplo 3

Retorna a cor da borda do elemento <div>:

alert(document.getElementById("myDiv").style.borderColor);

Experimente você mesmo

Sintaxe

Retorna a propriedade borderColor:

objeto.style.borderColor

Defina a propriedade borderColor:

objeto.style.borderColor = "cor|transparente|initial|inherit"

Valor da propriedade

Valor Descrição
cor

Define a cor da borda. A cor padrão é preta.

Veja Valores de cor do CSSpara obter a lista completa de valores de cor possíveis.
transparente A cor da borda é transparente (o conteúdo subjacente é visível).
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: preto
Retorno: Cadeia de caracteres, que representa a cor da borda do elemento.
Versão do CSS: CSS1

Suporte do navegador

O número na tabela indica a versão do navegador que suporta completamente essa propriedade.

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