css布局圆角表格实现原理是什么？

用ＣＳＳ布局一个圆角的表格代码如下：　
<style type="text/css">
div#nifty{ margin: 0 auto;background:#000000;}

div.rtop, div.rbottom{display:block;background:#FFFFFF;}
div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background:#000000;}
div.r1{margin: 0 5px}
div.r2{margin: 0 3px}
div.r3{margin: 0 2px}
div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}
</style>
<div id="nifty">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<p>Junstudio Blog</p>
<p>css实现圆角表格的效果</p>
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
这段代码看的我眼发花，原理不懂，不知道代码为什么这样写，一头的雾水．
希望高手能把基本原理说下，或者把代码解释下，也行，最好是把原理说下，呵呵，其他的我在自己去想吧．急．这问题没解决，我天天发．呵呵，不解决心里不爽．