Propriedades de Borda
Propriedades de Borda
A propriedade border define a cor, a espessura, e o tipo de borda que o elemento terá.
É possível definir características individuais de cada borda. Pode manter cores, larguras e estilos diferentes em cada uma das bordas do elemento.
Existem várias maneiras de especificar as características da borda. Esta primeira maneira é mais longa e trabalhosa. Você pode especificar cada uma das características separadamente de cada uma das bordas, assim:
div {border-right-width: 10px; /* Define a largura de borda da direita */
border-right-style: solid; /* Define o tipo da borda */
border-right-color: #F4F9F2; /* Define a cor da Borda */
Verifique a tabela abaixo para ver as opções deste modo de escrita:
| Propriedade | Descrição |
|---|---|
| border-top-width | Define a largura da borda do Topo. |
| border-top-style | Define o estilo da borda do Topo. |
| border-top-color | Define a cor da borda do Topo. |
| border-right-width | Define a largura da borda na direita. |
| border-right-style | Define o estilo da borda da direita. |
| border-right-color | Define a cor da borda da direita. |
| border-bottom-width | Define o estilo de borda em baixo. |
| border-bottom-style | Define o estilo da borda do lado de baixo. |
| border-bottom-color | Define a cor da borda de baixo. |
| border-left-width | Define a espessura de borda da esquerda. |
| border-left-style | Define o tipo de borda da esquerda. |
| border-left-color | Define a cor da borda da esquerda. |
Definindo as bordas ddesse modo, o código CSS ficará enorme, prejudicando a simplicidade. Portanto, você pode escrever tudo de forma mais resumida. Segue o código:
div {border-right: 10px solid #F9FAC8; /* O Primeiro valor é a espessura, o segundo o estilo da borda e o terceiro a cor */}
O código fica muito menor, facilitando a legibilidade do código. A seqüência de valores fica desta forma:
div {border-right: espessura estilo cor;}
Você também pode definir com apenas uma linha, um estilo igual para todas as bordas, é só fazer deste modo:
div {border: 10px solid black;}
Estilos de Borda
Há muitos estilo de borda... Algumas não funcionam no Internet Explorer, mas funcionam no grupinho KMOS (Konqueror, Mozilla, Opera e Safari).
| Estilo | Resultado | Suporte dos browsers |
|---|---|---|
| dotted |
border:5px dotted black;
|
Todos |
| dashed |
border:5px dashed black;
|
Todos |
| solid |
border:5px solid black;
|
Todos |
| double |
border:5px double black;
|
KMOS |
| groove |
border:5px groove black;
|
KMOS |
| ridge |
border:5px ridge black;
|
KMOS |
| inset |
border:5px inset black;
|
KMOS |
| outset |
border:5px outset black;
|
KMOS |
No CSS3
Reza a lenda do W3C que no CSS3 teremos algumas mudanças na propriedade border. Se essas mudanças acontecerem teremos algumas grandes novidades interessantes.
Por exemplo, poderemos definir uma imagem de background para as bordas. Poderemos também criar cantos arredondados e ainda definir o quanto estes cantos serão arredondados. Realmente será uma mão na roda ter todas essas possibilidades.
Se você quiser dar uma lida na especificação que explica essas características, acesse o endereço: http://www.w3.org/TR/2002/WD-css3-border-20021107/