Propriedades de Bordas
Trabalhar com bordas em css é muito simples. Basicamente temos três propriedades que se combinam e podem ser aplicadas a diversos seletores. São elas: border-style, border-width e border-color. A partir do nome já fica bem fácil imaginar o que cada uma faz, mas vou falar resumidamente sobre elas.
Border-style: define o estilo que a borda terá. Como opções possíveis temos dotted (pontilhada), dashed (tracejada), solid (sólida), double (dupla), groove (entalhada), ridge (ressalto), inset (baixo relevo) e outset (alto relevo).
A imagem abaixo ilustra cada uma delas:
A propriedade border-width determina a espessura que a borda terá. Vou pegar o exemplo acima e alterar, somente na borda sólida, seu tamanho para 10px, com o seguinte comando:
.bordaSolida
{
border:solid;
border-width:10px;
}
Vejamos como ficou:
A propriedade border-color, como o nome já sugere, permite determinar cores para as bordas. Adicionarei, também para a borda sólida do nosso exemplo, a cor azul.
.bordaSolida
{
border:solid;
border-width:10px;
border-color:blue;
}
O interessante é que você pode aplicar essas regras somente para uma borda do elemento. Suponhamos que a borda direita é que nos interessa. Dessa forma nosso comando para definir a cor ficaria:
border-right-color:Blue;
E isso resultaria no seguinte resultado:
Poderíamos usar qualquer uma das propriedades vistas aqui para apenas uma das bordas. Bastaria seguir a regra:
Borda superior: border-top
Borda inferior: border-bottom
Borda esquerda: border-left
Borda direita: border-right
Para dar um exemplo de tudo isso, vou criar o seguinte conjunto de regras para a borda groove do nosso exemplo:
Border-width:5px;
Border-top-color:green;
Border-right-width:10px;
Border-bottom-style:dotted;
Border-left-color:red;
Todas as bordas do nosso groove estão com 5px de espessura, exceto a da direita, onde especificamos que queríamos 10px. Todas as bordas são do tipo groove, exceto a inferior, que é do tipo dotted, a borda esquerda tem a cor vermelha enquanto a superior ficou verde.
Evidentemente esse exemplo ficou horrível, mas serviu para mostrar que é possível aplicar qualquer propriedade de borda para cada uma das bordas de um elemento, isoladamente.