border-color

Resumo

A propriedade border-color é muito útil para ajustar a cor dos quatro lados da borda do elemento.

  • Valor inicial: os elementos da propriedade color
  • Aplica-se a: todos os elementos
  • Herdado: não
  • Porcentagens: N/A
  • Mídia: visual
  • Valor computado: O valor computado de color por padrão, ou como especificado.

Sintaxe

border-color: [ <color> || transparent ]{1,4} | inherit

Valores

<color> 
A cor pode ser especificada como um valor RGB hexadecimal, um valor RGB regular ou usando uma das palavras-chave de cores pré-definidas.
transparent 
A borda não é desenhada, mas ainda continua ocupando espaço na página.

Até quatro valores podem ser fornecidos;

Se um valor de cor é fornecido, então todas as quatros bordas ficam daquela cor.
Se dois valores são fornecidos, as bordas inferior e superior utilizam-se do primeiro valor e as esquerda e direita do segundo valor.
Se três valores são fornecidos, o primeiro é para a borda superior, o segundo para a esquerda e direita e o terceiro para a inferior.
Se quatro valores são dados, o primeiro é para a borda superior, o segundo para a direita, o terceiro para a inferior e o quarto para a esquerda.

Exemplos

View Live Examples

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notas

No caso de querer ver a borda, você deve ajustar o border-width para um valor positivo e o border-style para algo visível.

Especificações

Compatibilidade com navegadores

Navegador Versão mais antiga
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

Extensões Mozilla

As seguintes Extensões da Mozilla ajustam os respectivos lados da borda para múltiplas cores para navegadores Gecko.

Veja também

border, border-color, border-width, border-style

Categorias

Interwiki Language Links

Document Tags and Contributors

Contributors to this page: Verruckt, gerson23
Last updated by: gerson23,