CSS border styles

by Umair Rafiq

HTML

<div style="position:relative; background:black; height:200px;width:200px; border: 1px solid #AAA">
  <div style="position:absolute; background:yellow; height:10%;width:200px;"></div>
  <div style="position:absolute; background:yellow; bottom:0px; height:10%;width:200px;"></div>
  <div style="position:absolute; background:blue; left:20px; top:0px; height:16px;width:20px; border: 0px solid #AAA">1</div>
  <div style="position:absolute; background:blue; left:20px; top:20px; height:16px;width:20px; border: 0px solid #AAA">2</div>
  <div style="position:absolute; background:blue; left:20px; top:40px; height:16px;width:20px; border: 0px solid #AAA">3</div>
  <div style="position:absolute; background:blue; left:20px; top:60px; height:16px;width:20px; border: 0px solid #AAA">4</div>
  <div style="position:absolute; background:blue; left:20px; top:80px; height:16px;width:20px; border: 0px solid #AAA">5</div>
  <div style="position:absolute; background:blue; left:20px; top:100px; height:16px;width:20px; border: 0px solid #AAA">6</div>
  <div style="position:absolute; background:blue; left:20px; top:120px; height:16px;width:20px; border: 0px solid #AAA">7</div>
  <div style="position:absolute; background:blue; left:20px; top:140px; height:16px;width:20px; border: 0px solid #AAA">8</div>
  <div style="position:absolute; background:blue; left:20px; top:160px; height:16px;width:20px; border: 0px solid #AAA">9</div>
  <div style="position:absolute; background:blue; left:20px; top:160px; height:16px;width:20px; border: 0px solid #AAA">10</div>
</div>