Hoje irei explicar como aplicar estilos às bordas, usando CSS. O atalho chama-se “border” e suas propriedades são:
- border-top ( borda superior)
- border-right (borda direita)
- border-bottom (borda inferior)
- border-left ( borda esquerda)
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
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.
