Sim, nós sabemos: podemos definir a largura da borda. A largura da borda pode ser 5px, 10px, 20px ou qualquer valor.
Porém, você já imaginou que pode definir uma cor separada para cada borda de 1px? Qual é esse conceito? Ou seja, se você definir uma borda de 10px para um elemento, poderá definir 10 cores para essa área de borda de 10px. Cada 1px é uma camada (grupo). DEMO: explicação detalhada de vários conjuntos de cores de borda em cores de borda css3
Bem, vamos revisar como definir o tamanho da borda dos elementos (bloco de código 1):
O código acima indica que definimos uma borda de 6px para um elemento div com o teste className. Claro, este é um retângulo com 4 lados.
Portanto, este código CSS pode realmente ser refinado em (bloco de código 2):
Por meio do código refinado, descobrimos que podemos realmente definir cores para os quatro lados do retângulo. Quanto a definir se as cores devem ser iguais ou diferentes, isso depende de suas necessidades.
Ao executar o código refinado (é claro que você pode alterar a cor de cada lado), você verá um retângulo com uma borda preta de 6px. Bem, é isso que esperamos.
Porém, agora podemos dividir a borda de 6px em 6 grupos, cada 1px é um grupo, então cada borda pode ser definida com até 6 cores diferentes.
Como fazer isso? Dê uma olhada (bloco de código três):
.teste{
largura da borda:6px;
estilo de borda: sólido;
cores da borda superior:#000 #fff #999 #aaa #ccc #eee;
cores da borda direita:#000 #fff #999 #aaa #ccc #eee;
cores da borda inferior:#000 #fff #999 #aaa #ccc #eee;
cores da borda esquerda:#000 #fff #999 #aaa #ccc #eee;
}
.teste{
largura da borda:6px;
estilo de borda: sólido;
cor superior da borda:#000;
cor da borda direita:#000;
cor da borda inferior:#000;
cor da borda esquerda:#000;
}
.teste{
borda:6px sólido #000;
}
<div class="test">Testar configurações de cores da borda</div>