|
|
Border-style: dotted
<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">
dotted dotted dotted dotted dotted
</div>
dotted dotted dotted dotted dotted
Border-style: solid
<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">
solid solid solid solid solid
</div>
solid solid solid solid solid
Border-style: dashed
<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">
dashed dashed dashed dashed dashed
</div>
dashed dashed dashed dashed dashed
Border-style: groove
<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">
groove groove groove groove groove
</div>
groove groove groove groove groove
Border-style: double
<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">
double double double double double
</div>
double double double double double
Border-style: inset
<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">
inset inset inset inset inset
</div>
inset inset inset inset inset
Border-style: outset
<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">
outset outset outset outset outset
</div>
outset outset outset outset outset
Border-style: ridge
<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">
ridge ridge ridge ridge ridge
</div>
ridge ridge ridge ridge ridge
Border Campur Aduk
<div style="border-style:dotted dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">
dotted dashed double outset
</div>
dotted dashed double outset
Syntax untuk border-radius
| Mozilla Equivalent | Browser Opera 10.5 | Webkit Equivalent (Safari 3) |
| -moz-border-radius-topright | border-top-right-radius | -webkit-border-top-right-radius |
| -moz-border-radius-bottomright | border-bottom-right-radius | -webkit-border-bottom-right-radius |
| -moz-border-radius-bottomleft | border-bottom-left-radius | -webkit-border-bottom-left-radius |
| -moz-border-radius-topleft | border-top-left-radius | -webkit-border-top-left-radius |
| -moz-border-radius | border-radius | -webkit-border-radius |
-Moz-Border-Radius (Untuk Mozilla)
<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>
<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
-Webkit-Border-Radius (Untuk Safari)
<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
Border-Radius (Support Opera 10.5)
<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
Fonte: http://miscah.blogspot.com/2010/04/css-border-style.html
0 comentários:
Postar um comentário