본문 바로가기
CSS

CSS를 이용한 DIV 둥근 테두리 만들기.

by 포샵질 2011. 11. 11.


<style type="text/css">

#r {width: 250px ;font:bold 7pt tahoma;color:gray;}

#r b{display:block;height:1px;overflow:hidden;}

#r b, #r #r5{border: gray ;background: white ;}

#r #r1{background: gray ;}

#r #r1{margin:0px 5px 0px 5px;}

#r #r2{border-left:solid 2px;border-right:solid 2px;margin:0px 3px 0px 3px;}

#r #r3, #r #r4, #r #r5{border-left:solid 1px;border-right:solid 1px;}

#r #r3{margin:0px 2px 0px 2px;}

#r #r4{height:2px;}

#r #r4{margin:0px 1px 0px 1px;}

#r #r5{padding:0px 5px 0px 5px;}

</style>


<div id=r> <b id=r1></b><b id=r2></b><b id=r3></b><b id=r4></b>

<div id=r5 style="height:300px">


<!-- 내용 시작 -->

둥근모서리 연습


</div>

<b id=r4></b><b id=r3></b><b id=r2></b><b id=r1></b> </div>


'CSS' 카테고리의 다른 글

투명 style  (0) 2017.01.25
CSS 기본 세팅  (0) 2017.01.25
font-family 설정시 주의해야 할 점.  (0) 2017.01.25
Table empty cell 문제 해결 Tip  (0) 2017.01.24
CSS핵(hack) 정리  (0) 2012.11.12