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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<html> <head> <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: