Você está na página 1de 2

24/04/2012

Bordas
As reas de bordas possuem trs propriedades que podem ser especificadas em uma definio de estilo: sua espessura (width), seu padro visual (style), sua cor de fundo (color).

Espessura da borda borda superior - border-top-width: valor


Professores: Cristiane Maciel Rizo - cris@unoeste.br Andr Menegassi andremenagassi@unoeste.br Slvio Carro silvio@unoeste.br

borda da direita - border-right-width: valor borda inferior - border-bottom-width: valor borda da esquerda - border-left-width: valor

Espessura da Borda
O valor pode ser: Expresso de forma explcita (um nmero e uma unidade, como em 10px). A forma percentual no pode ser usada. Expresso de forma relativa atravs das palavras-chave: thin - para uma borda de espessura fina medium - para uma borda de espessura mdia thick - para uma borda de espessura grossa Os valores de espessura correspondentes s palavras chaves thin, medium e thick varia em funo do browser usado.

Espessura da Borda
Quando o valor no indicado adotado o valor default (padro) medium. Ateno para o fato de que quando o padro visual da borda (style) no est definido, o browser adota o valor none, fazendo com que no seja visualizada nenhuma borda.

Padro visual da borda


O padro visual das bordas define qual o estilo das linhas que compem as bordas do elemento HTML. Este padro visual definido da seguinte maneira:

Padro visual da borda


O valor definido por uma das seguintes palavras-chave: none - para indicar a ausncia da borda; equivalente a definir border-width - como zero dotted - para bordas pontilhadas

borda superior - border-top-style: valor borda da direita - border-right-style: valor borda inferior - border-bottom-style: valor borda da esquerda - border-left-style: valor

dashed - para bordas tracejadas solid - para bordas com linha slida double - para bordas com duas linhas slidas groove - para bordas em baixo relevo ridge - para bordas em alto relevo inset - para bordas em baixo relevo expandido outset - para bordas em alto relevo expandido

24/04/2012

Padro visual da borda


Quando o valor no especificado o browser adota o valor default (padro) none. Alguns browsers diferenciam apenas os valores none e solid: todos os demais so interpretados como solid.

Cor de fundo da Borda


borda superior - border-top-color: valor borda da direita - border-right-color: valor borda inferior - border-bottom-color: valor borda da esquerda - border-left-color: valor

Bordas
possvel definir a espessura, o padro visual e a cor da borda em um nico elemento:
borda superior - border-top: valor1 valor2 valor3 borda da direita - border-right: valor1 valor2 valor3 borda inferior - border-bottom: valor1 valor2 valor3 borda da esquerda - border-left: valor1 valor2 valor3

Bordas
O CSS possui dois modelos de borda de tabelas: separado e fundido. No modelo separado, as bordas so posicionadas nas clulas individuais e, no modelo fundido, as clulas compartilham as bordas; border-collapse: collapse; border-collapse: separate;

Onde:
Valor1: espessura da borda Valor2: padro visual da borda Valor3: cor da borda