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






Bordas

É possível adicionar bordas a um elemento e, em seguida, definir propriedades, como estilo, cor, enchimento e largura da borda. Estas propriedades poderão ser aplicadas em textos, botões, figuras e etc...

Click Estilos de bordas para visualizar estilos de bordas - solid (sólido), dotted (pontilhado), dashed (tracejado), double (duplo), groove (sulco), ridge (ressalto), insert (baixo relevo), outset (alto relevo).

A sintaxe utilizada para borda é como segue:
style="border: X Z" onde X é espessura em pixel e Z o estilo da borda.
O comando acima com o valor de X=3 e Z=solid gera um estilo de borda sólida com espessura da linha igual a 3, conforme abaixo ilustrado e aplicado a um parágrafo:

<p style="border: 3 solid" >Texto</p>

 


Margens à esquerda e à direita - definirão a posição da borda dentro da página.
Cada propriedade deverá ser separado por ponto e virgula ( ; )
margin-left: 50; margin-right: 90 - margem à esquerda e margem à direita da janela em pixels.


Exemplo:
<p style="border: 3px solid #000000; margin-left: 50; margin-right: 90">Texto</p>

Resultado: 

Texto


Cada lado da borda pode ter um estilo, cor e largura diferentes.

<p style="border-left-style: solid; border-left-color: #FF00FF; border-right-style: solid; border-right-color: #006600; border-top-style: solid; border-bottom-style: double; border-bottom-color: #FF0000; margin-left: 260; margin-right: 260; padding-left: 8px">Texto</p>

Detalhamento do código acima:

border-left-style: solid; border-left-color: #FF00FF  - Estilo da borda esquerda sólido e a cor magenta 
border-right-style: solid; border-right-color: #006600  - borda direita estilo sólido e cor verde
border-top-style: solid - borda superior estilo sólido, e como as demais propriedades não foram definidas, o navegador lhe atribuirá valores padrões (default).
border-bottom-style: dashed; border-bottom-color: #FF0000 borda da base estilo tracejado, cor vermelha
e deverá estar a uma distância de 260 pixels da margem esquerda  da página (margin-left: 260), 260 da margem direita (margin-right: 260) e o texto deverá estar a uma distância de 8 pixels da borda esquerda (padding-left: 8px).

Resultado:

Texto


Os estilos personalizados de bordas podem ser aplicados a qualquer item na página, incluindo parágrafos, listas, figuras e tabelas.

Para adicionar bordas em figuras basta inserir as propriedades acima descritas no comando de imagens. Exemplo prático:
código para inserir uma imagem <img  src="scrollgraph.gif" width="232" height="242">
Estilo de borda desejada: style="border: 8 solid #FF00FF"
Código da imagem com borda: <img  src="scrollgraph.gif" width="232" height="242" style="border: 8 solid #FF00FF"
>

Resultado:

 


Na caixa de Teste on-line abaixo você poderá configurar e testar uma borda.

Teste on-line: