CSS3 Borders - Style

CSS3 module: Border Style
參考資料：W3C module Border

dotted

dashed

solid

double

dot-dash 效果出不來

dot-dot-dash 效果出不來

wave 效果出不來

groove

ridge

inset

outset

<style type="text/css">
.divClass
{
 
 width:200px;
 height:30px;
 background-color:LemonChiffon;
 border:1px solid LightSkyBlue;
 margin-top:5px; 
 margin-left:10%; 
 margin-right:auto; 
 margin-bottom:5px; 
}
#testDiv_a
{
 border:2px dotted;
}
#testDiv_b
{
 border:2px dashed;
}
#testDiv_c
{
 border:2px solid;
}
#testDiv_d
{
 border:5px double;
}
#testDiv_e
{
 border:2px dot-dash;
}
#testDiv_f
{
 border:2px dot-dot-dash;
}
#testDiv_g
{
 border:2px wave;
}
#testDiv_h
{
  border:10px groove LightSkyBlue;
}
#testDiv_i
{
 border:10px ridge LightSkyBlue;
}
#testDiv_j
{
 border:10px inset LightSkyBlue;
}
#testDiv_k
{
 border:10px outset LightSkyBlue;
}
</style>
<div class="divClass" id="testDiv_a">
dotted</div>
<div class="divClass" id="testDiv_b">
dashed</div>
<div class="divClass" id="testDiv_c">
solid</div>
<div class="divClass" id="testDiv_d">
double</div>
<div class="divClass" id="testDiv_e">
dot-dash 效果出不來</div>
<div class="divClass" id="testDiv_f">
dot-dot-dash 效果出不來</div>
<div class="divClass" id="testDiv_g">
wave 效果出不來</div>
<div class="divClass" id="testDiv_h">
groove</div>
<div class="divClass" id="testDiv_i">
ridge</div>
<div class="divClass" id="testDiv_j">
inset</div>
<div class="divClass" id="testDiv_k">
outset</div>