Propriedade border-color

A propriedade border-color define a cor da borda para todos os lados simultaneamente ou separadamente para cada lado. Os valores da propriedade são quaisquer unidades de cor. Valor padrão: a mesma cor do texto do bloco.

A propriedade é uma propriedade abreviada para as seguintes propriedades: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaxe

seletor {
	border-color: cor;
}

Quantidade de valores

A propriedade pode receber 1, 2, 3 ou 4 valores, especificados com espaços:

Quantidade	Descrição
`1`	Tipo para todos os lados simultaneamente.
`2`	Primeiro valor para topo e base, segundo - para bordas esquerda e direita.
`3`	Primeiro valor para o topo, segundo - para bordas esquerda e direita, terceiro - para a base.
`4`	Primeiro valor para a borda superior, segundo - para a direita, terceiro - para a inferior, quarto - para a borda esquerda.

Exemplo

Vamos colorir a borda do bloco em vermelho:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir borda vermelha para os lados superior e inferior, e azul para os lados direito e esquerdo:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir borda vermelha para o lado superior, azul para o direito, verde para o inferior, preta para o lado esquerdo:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir simultaneamente espessura, tipo e cor diferentes para a borda:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Exemplo

Se a cor da borda não for definida em border-color - ela será obtida da propriedade color:

<div id="elem"></div>

#elem {
	color: red;
	border-style: solid;
	border-width: 2px;
	width: 300px;
	height: 100px;
}

Veja também

a propriedade border-width,
que define a espessura da borda
a propriedade border-style,
que define o tipo da borda
a propriedade border,
que é a propriedade abreviada para a borda