이미지없이 css로 둥근 테두리 (모서리) 구현하기

출처 ▷ http://www.html.it/articoli/nifty/index.html

서핑 중 되게 쓸만한걸 찾았네요, 그리고 바로 적용했습니다 !

CSS

  
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

HTML

  
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>

원작자는 둥근 모서리를 위해 <b>태그를 활용하였다고합니다. 인라인요소이고, <span>보다 짧기 때문이죠.

이 태그는 float요소에도 활용이 가능하며, 크기도 조절가능합니다.

예제 - http://hsol.tistory.com