#3.4 - Bordas com CSS - Guia para criação de themes

Também é com CSS que se configura a borda de um elemento, sua cor, espessura, estilo, arredondamento dos cantos e afins. Quando se está personalizando as bordas de um elemento, é possível personalizar todas as quatro bordas ou cada uma em particular.

Ao personalizar a cor, espessura e estilo separadamente de cada borda, podemos personalizar a de cima, de baixo, direita ou esquerda, já quando personalizamos o arredondamento dos cantos separadamente, as opções são canto superior direito, superior esquerdo, inferior direito, inferior esquerdo. Veja a seguir cada uma dessas personalizações.

Cor da borda

A propriedade para escolher a cor da borda do elemento é border-color. Para especificar a cor de somente uma das bordas, usa-se: border-top-color (borda de cima), border-bottom-color (borda de baixo), border-left-color (borda da esquerda) ou border-right-color (borda da direita). Veja um exemplo:

<div class="borda_personalizada">
Conteúdo
</div>

Com o seguinte código CSS:
 

div.borda_personalizada {
                border-top-color: #FF0000;
                border-left-color: #00FF00;
                border-bottom-color: #0000FF;
}

Porém, se usar este código, a borda ainda não aparecerá, pois você ainda não definiu a espessura e o estilo da borda, veja os próximos passos.

Largura da borda

Neste passo, você aprenderá como escolher a largura da borda. A propriedade da largura da borda é border-width. Analogamente à da cor da borda, existem as propriedades border-top-width (borda de cima), border-bottom-width (borda de baixo), border-left-width (borda da esquerda) ou border-right-width (borda da direita).
 

Estilo da borda

Existem nove tipos de estilo de bordas que podem ser escolhidos. O mais comum deles é o solid (que deixa a borda “sólida”, ininterrupta, basicamente uma linha). Usando a propriedade border-style (e suas variações: border-top-style, border-bottom-style, border-left-style e border-right-style), esta propriedade pode conter os seguintes valores:
 

Combinando estas três propriedades (color, width e style), já é possível usar bordas nos elementos. Faça alguns testes, coloque diversas cores, larguras e estilos diferentes nos elementos, combine-os!

Arredondamento da borda

Esta é uma propriedade CSS relativamente nova, ela nem sempre existiu no CSS e, há uns anos atrás, para ter um elemento com as bordas arredondadas era necessário usar imagens. Para usar bordas arredondadas, usa-se a propriedade border-radius (ou seja, o valor é um valor numérico, seguido da sua unidade (geralmente px) que define o raio da curvatura). Além do border-radius, você pode escolher o arredondamento para cada canto em particular, veja: 
 

Diferentemente das outras propriedades de borda, border-radius é uma propriedade que não necessita das outras, pois pode definir a curvatura diretamente do elemento, não simplesmente da borda. Por exemplo, você pode fazer com que uma imagem tenha as bordas arredondadas assim:

img {
                border-radius: 15px;
}

Bom, essas são as propriedades de borda, espero que tenham gostado, e que utilizem para criar o theme de vocês e deixar ele ainda mais bonito ! =)