HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Bordas


border
Define uma borda que irá envolver o elemento.

Borda com as 4 linhas iguais:
border-color  - Cor da borda
border-style
- Estilo da borda
border-width 
- Espessura da borda
Exemplo:
div {border-style: solid; border-color: #0000FF }

Sintaxe abreviada para declarar as três propriedades da borda em uma regra única:
seletor { border: espessura estilo cor }
Exemplo:
div { border: 2px dotted #00FF00 }


Borda com as 4 linhas diferentes:
Borda base.
border-bottom-color  - Cor da borda base.
border-bottom-style   - Estilo da borda base.
border-bottom-width   - Largura da borda base.
Exemplo:
div {border-top-style: solid; border-top-color: #FF0000 }

Borda esquerda.
border-left-color  - Cor da borda esquerda.
border-left-style  - Estilo da borda esquerda.
border-left-width  - Largura da borda esquerda.
Exemplo:
div {border-left-style: dashed; border-left-width: 3px}

Borda direita.
border-right-color  - Cor da borda direita.
border-right-style  - Estilo da borda direita.
border-right-width  - Largura da borda direita.

Borda topo.
border-top-color  - Cor da borda topo.
border-top-style  - Estilo da borda topo.
border-top-width  - Largura da borda topo.


Sintaxe abreviada para declarar as três propriedades de uma linha da borda em uma regra única:
seletor { border-linha: espessura estilo cor }
Exemplo:
div { border-bottom: 2px dotted #00FF00 }

Sintaxe abreviada para declarar as três propriedades das 4 linhas da borda  em uma regra única:
seletor { border-left: espessura estilo cor; border-right: espessura estilo cor; border-top: espessura estilo cor; border-bottom: espessura estilo cor }
Exemplo:
table { border-left: 4px double #800000; border-right: 3px ridge #C0C0C0; border-top: 2px solid #FF0000; border-bottom: 1px dashed #0000FF }

border-color  - A propriedade border-color define a cor das quatro linhas da borda.
Ela aceita no mínimo uma cor e no máximo quatro cores.
Exemplos:
table { border-color: red } todas as quatro linhas da borda serão vermelhas (red)
table { border-color: red green } as linhas  do topo e da base serão vermelhas e as linhas esquerda e direita serão verdes
table { border-color: red green blue } a linha de topo será vermelha, as linhas esquerda e
direita serão verdes e a linha da base será azul
table { border-color: red green blue yellow } a linha de topo será vermelha, a linha direita será
verde, a linha da base será azul e a linha da esquerda será amarela.

border-width
notação abreviada para definir a largura das quatro linhas da borda em uma única declaração
thin  - Fina.
medium  - Média.
thick  - Grossa.
px  - Determina a espessura em pixels

border-style
define o estilo das quatro linhas da borda em uma única declaração e pode assumir quatro valores diferentes.
Exemplo:
table {border-style: dotted} todas as quatro linhas da borda serão pontilhadas
table {border-style: dotted dashed} as linhas do topo e da base serão pontilhadas e as linhas esquerda e direita
serão tracejadas
table {border-style: dotted dashed solid} a linha de topo será pontilhada, as linhas
esquerda e direita serão tracejadas e a linha da base será sólida
table {border-style: dotted dashed solid double} a linha de topo será pontilhada, a linha direita
será tracejada, a linha da base será sólida e a linha da esquerda será dupla

solid  - Sólida.
dashed  - Tracejada.
dotted  - Pontilhada.
double  - Dupla.
groove  - Entalhada.
ridge  - Eriçada.
inset  - Baixo relevo.
outset  - Alto relevo.
none  - Sem borda.
Click aqui para visualizar estilos de borda

border-collapse
collapse Borda em alto relevo refinada.

  TABELA PADRÃO
     
 <table border="1">
   
   
     
TABELA COM COLLAPSE
    
  <table style="BORDER-COLLAPSE: collapse" border="1">
    
    
    

Editor de bordas CSS