Propriedades Border
A propriedade Border define os tipos de bordas que podem ser associados a uma página, bloco de texto ou a um elemento.As propriedades para as bordas são as listadas abaixo:
Propriedade
|
Efeito
|
border-width:
|
espessura da borda.
|
border-style:
|
cor da borda
|
border-top-width:
|
espessura da borda superior
|
border-top-style:
|
estilo da borda superior
|
border-top-color:
|
cor da borda superior;
|
border-right-width
|
espessura da borda direita
|
border-right-style
|
estilo da borda direita
|
border-right-color
|
cor da borda direita
|
border-bottom-width
|
espessura da borda inferior
|
border-bottom-style
|
estilo da borda inferior
|
border-bottom-color
|
cor da borda inferior
|
border-left-width
|
espessura da borda esquerda
|
border-left-style
|
estilo da borda esquerda
|
border-left-color
|
cor da borda esquerda
|
border-top
|
maneira abreviada para todas as propriedades da borda superior
|
border-right
|
maneira abreviada para todas as propriedades da
borda direita
|
border-bottom
|
abreviada para todas as propriedades da borda inferior
|
border-left
|
maneira abreviada para todas as propriedades da borda esquerda
|
border
|
maneira abreviada para todas as quatro bordas
|
Valores válidos para as propriedades das bordas
- color:
- código hexadecimal: #FFFFFF
- código rgb: rgb(255,235,0)
- nome da cor: red, blue, green...etc
- style:
- none: nenhuma borda
- hidden: equivalente a none
- dotted: borda pontilhada
- dashed: borda tracejada
- solid: borda contínua
- double: borda dupla
- groove: borda entalhada
- ridge: borda em ressalto
- inset: borda em baixo relevo
- outset: borda em alto relevo
- width:
- thin: borda fina
- medium: borda média
- thick: borda grossa
- length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
Existem vários estilos de bordas, definidos pela marcação
border-style.
Visualize no exemplo abaixo:
<title>Efeitos de Borda com CSS</title><style type="text/css">#borda1{ border-color:#06F; border-width:thin; border-style:solid; width:250px; height:50px; float:left; margin-bottom:10px; }#borda2{ border-color:#06F; border-width:thin; border-style:dashed; width:250px; height:50px; float:right; clear:right; margin-bottom:10px; }#borda3{ border-color:#06F; border-width:thin; border-style:dotted; width:250px; height:50px; float:left; clear:left; margin-bottom:10px; }#borda4{ border-color:#06F; border-style:double; width:250px; height:50px; float:right; clear:right; margin-bottom:10px; }#borda5{ border-color:#06F; border-width:thin; border-style:groove; width:250px; height:50px; float:left; clear:left; margin-bottom:10px; }#borda6{ border-color:#06F; border-width:thin; border-style:inset; width:250px; height:50px; float:right; clear:right; margin-bottom:10px; }#borda7{ border-color:#06F; border-width:thin; border-style:ridge; width:250px; height:50px; float:left; clear:left margin-bottom:10px; }#borda8{ border-color:#06F; border-style:outset; width:250px; height:50px; float:right; clear:right; margin-bottom:10px; }</style> </head><body><div id="borda1">Borda Solid</div><div id="borda2">Borda Dashed</div><div id="borda3">Borda Dotted</div><div id="borda4">Borda Double</div><div id="borda5">Borda Groove</div><div id="borda6">Borda Inset</div><div id="borda7">Borda Ridge</div><div id="borda8">Borda OutSet</div></body></html> Resultado:
Podemos mudar de um modo geral o individual segue o exemplo baixo.
<title>Efeitos de Borda com CSS</title><style type="text/css">#borda1{ border-color:#F00; border-width:3px; border-style:solid; width:250px; height:50px; float:left; margin-bottom:10px; }#borda2{ border-color:#06F; border-left-width::5px; border-left-color:#F00; border-style:solid; width:250px; height:50px; float:right; clear:right; margin-bottom:10px; }#borda3{ border-color:#06F; border-right-width:5px; border-right-color:#F00; border-style:solid; width:250px; height:50px; float:left; clear:left; margin-bottom:10px; }#borda4{ border-color:#06F; border-style:solid; border-bottom-width:5px; border-bottom-color:#F00; width:250px; height:50px; float:right; clear:right; margin-bottom:10px; }#borda5{ border-color:#06F; border-width:thin; border-top-width:5px; border-top-color:#F00; border-style:solid; width:250px; height:50px; float:left; clear:left; margin-bottom:10px; }</style></head><body><div id="borda1">Todas as Bordas</div><div id="borda2">Borda Esquerda</div><div id="borda3">Borda Direita</div><div id="borda4">Borda Inferior</div><div id="borda5">Borda Superior</div></body></html> Resultado:
Nenhum comentário:
Postar um comentário