<div id="d1">
  <p>↑top right→</p>
  <p>←left ↓bottom</p>
</div>
<div id="d2">
  <p>none</p>
</div>
<div id="d3">
  <p>hidden</p>
</div>
<div id="d4">
  <p>solid</p>
</div>
<div id="d5">
  <p>double</p>
</div>
<div id="d6">
  <p>groove</p>
</div>
<div id="d7">
  <p>ridge</p>
</div>
<div id="d8">
  <p>inset</p>
</div>
<div id="d9">
  <p>outset</p>
</div>
<div id="d10">
  <p>dashed</p>
</div>
<div id="d11">
  <p>dotted</p>
</div>

#d1{
  border-top   :solid 10px red;
  border-right :solid 10px blue;
  border-bottom:solid 10px green;
  border-left  :solid 10px yellow;
  margin-bottom:5px;
}
#d2{
  border:none;
  margin-bottom:5px;
}
#d3{
  border:hidden;
  margin-bottom:5px;
}
#d4{
  border:solid 10px red;
  margin-bottom:5px;
}
#d5{
  border:double 10px blue;
  margin-bottom:5px;
}
#d6{
  border:groove 10px green;
  margin-bottom:5px;
}
#d7{
  border:ridge 10px yellow;
  margin-bottom:5px;
}
#d8{
  border:inset 10px pink;
  margin-bottom:5px;
}
#d9{
  border:outset 10px gray;
  margin-bottom:5px;
}
#d10{
  border:dashed 10px skyblue;
  margin-bottom:5px;
}
#d11{
  border:dotted 10px lime;
  margin-bottom:5px;
}