CSS – aplicando estilos às bordas

Hoje irei explicar como aplicar estilos às bordas, usando CSS.
O atalho chama-se “border” e suas propriedades são:

1. border-top ( borda superior)
2. border-right (borda direita)
3. border-bottom (borda inferior)
4. border-left ( borda esquerda)

Para aplicar o mesmo estilo para todos os lados, usamos apenas o atalho “border”.
A sintaxe para aplicar estilos às bordas é:

seletor { border: largura estilo cor;}

Exemplo:

#linkbar a { color:#e6e6e6; text-transform:none; border-right:1px solid #808080; }

O seletor, em CSS, é o que vem sempre precedido por # (jogo da velha). “border-right” se refere ao lado da borda que receberá o estilo. “1px” é a largura, “solid” é o desenho e “#808080” é a cor da borda.
No exemplo acima, apliquei um estilo`apenas à borda direita da linkbar.

#busca { border: 1px solid #FFF; padding: 6px; }

Nesse outro exemplo, apliquei o mesmo estilo para os 4 lados da borda da busca.
Como vocês já devem ter notado, podemos aplicar estilos ao desenho da borda:

• none: sem estilos
• dotted: borda desenhada com pontos
• dashed: borda desenhada com pequenas linhas
• solid: borda desenhada com uma linha contínua
• outset: borda em 3D
• double: borda dupla

Vamos para outros exemplos, mostrando os desenhos das bordas:

border: 1px solid #FF0000;

border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-top: #ff0000 1px double; border-right: #ff0000 1px solid

Assim como nos demais posts, recomendo que vocês façam as modificações em um blog de testes e que visualizem até encontrarem um resultado satisfatório.