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
colorpor 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
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