Estilos de borda CSS
CSS permite criar vários tipos de bordas em elementos da página. A borda mais habitual é a de uma linha lisa, porém, também há outros tipos de bordas que podemos implementar como uma linha de pontos, bordas arredondadas, etc.
Na verdade, já falamos várias vezes de bordas com CSS, sobretudo para explicar modos de fazer as bordas arredondadas, que costumam ficar muito atraentes nas páginas web. De qualquer forma, veremos como se especifica uma borda com CSS.
DIV {
border: 1px solid #d0d0d0;
}
Assim, conseguiremos que todas as etiquetas DIV da página tenham uma borda de 1 pixel, sólido (de uma linha sólida) e com cor acinzentada (#d0d0d0).
O que vamos ver neste artigo são os diferentes estilos de borda, além do solid que já conhecemos. Para ilustrar o exercício, criamos uma página com os distintos exemplos de bordas. Porém, já que estamos falando de bordas, sobre sua declaração em CSS, cabe dizer que poderíamos utilizar outra notação distinta, na qual especificamos separadamente os três atributos da borda, como segue:
.bordasolido{
border-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}
Também podemos especificar as bordas separadamente de cada um dos lados do elemento, desta maneira:
.bordaporlados{
border-top: 1px solid #ff9999;
border-right: 2px dotted #99ff99;
border-bottom: 2px dashed #9999ff;
border-left: 4px double #666666;
}
Todas estas indicações para a construção de bordas, já vimos em artigos anteriores de CSS em criarweb.com, como o manual de CSS ou o workshop de CSS.
Estilos de borda
Com o atributo border-style podemos definir vários estilos de borda, entre uma gama relativamente ampla de possibilidades. Não obstante, temos que admitir que muitos dos estilos fazem bordas um pouco feias, que deveríamos utilizar com bastante cuidado.
Os possíveis estilos de borda são:
- solid
- dotted
- double
- dashed
- groove
- ridge
- inset
- outset
Agora vamos comentar estes distintos estilos e dar exemplos de cada um.
Borda solid:
Esta borda é de uma linha sólida.
.bordasolida{
border:-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}
Borda dotted (pontilhada):
Esta borda está composta à base de uma linha de pontos.
.bordapontilhada{
border: 1px dotted #ff8833;
}
Borda double (Dupla):
A borda dupla está composta por uma linha dupla sólida. Há que saber que para que esta borda se veja como uma linha dupla, temos que especificar uma largura de pelo menos 3 pixel. Assim, se veria uma borda com duas linhas de um pixel mais um espaço de separação da borda de outro pixel. À medida que especificamos uma largura maior da borda dupla, as linhas vão aumentando de grossura, assim como o espaço que as separa.
.bordadupla{
border: 9px double #990000;
}
Borda dashed (linha descontínua):
A borda dashed é muito parecida com a borda pontilhada, porém no lugar dos pontos, o que temos é uma linha partida.
.bordadashed{
border: 1px dashed #660000;
}
Borda groove (ranhura):
É uma borda especial, com uma espécie de relevo difícil de descrever, criado com a combinação de cores claras e escuras de borda.
.bordagroove{
border: 5px groove #66cc66;
}
Borda ridge (crista):
Este borda também é um pouco diferente. Parecida ao groove, porém com as cores escuras e claras invertidas.
div.bordaridge{
border: 10px ridge #6666cc;
}
Borda inset (relevo para dentro):
Cria uma borda com uma imitação de chanfrado, como se estivesse fundido. O efeito desta borda se vê melhor se o elemento que estiver na borda tiver uma cor de fundo parecida à cor da borda.
div.bordainset{
border: 10px inset #3333ff;
background-color: #0000ff;
}
Borda outset (com relevo para fora):
Este último estilo de borda imita um chanfrado, como se fosse um botão que está levantado. É igual ao estilo de borda inset, porém com as cores claras e escuras invertidas. Veremos também este efeito melhor se o elemento tiver uma cor de fundo.
div.bordaoutset{
border: 10px outset #cccccc;
background-color: #cccccc;
}
Fonte: http://www.criarweb.com/artigos/estilos-de-borda-css.html