DHTML

이미지 없이 둥근 모서리 박스 만드는 소스

tornado 2006. 11. 2. 16:36

펌 : 미니위니

by : 제민 (siopo)



소스


<style type="text/css">
 .rtop, .rbottom{display:block; background: #FFFFFF;}
 .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; }

 .r { text-align: center; width: 120px; font: bold 9px tahoma; }
 .r1 { margin: 0 5px; background: #DEDEDE; height: 1px; }
 .r2 { margin: 0 3px; border: solid #DEDEDE; border-width: 0 2px; }
 .r3 { margin: 0 2px; border: solid #DEDEDE; border-width: 0 1px; }
 .r4 { margin: 0 1px; border: solid #DEDEDE; border-width: 0 1px;  height: 2px}
 
 .r5 {margin: 0 2px; background: #DEDEDE; height: 1px}
 .r6 {margin: 0 1px; background: #FFFFFF; border: solid #DEDEDE; border-width: 0 1px;  height: 1px}
 
 .rc { border: solid #DEDEDE; border-width: 0 1px; }
</style>

<div class="r">
 <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
 <div class="rc">
  Round Table 1
 </div>
 <b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b>
</div>

<br />

<div class="r">
 <b class="rtop"><b class="r5"></b><b class="r6"></b></b>
 <div class="rc">
  Round Table 2
 </div>
 <b class="rbottom"><b class="r6"></b><b class="r5"></b></b>
</div>



결과