css3부터 가능해진 border-radius.
모서리를 둥글게 만들때 사용.
border-top-left-radius: 속성값 (%,px)
border-top-right-radius: 속성값 (%,px)
border-bottom-right-radius : 속성값
border-bottem-left-radus : 속성값
한번에 쓸때는
border-radius : 속성값
으로 해줌.
| <style type="text/css"> .radius01 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-left-radius:20px 50px; } .radius02 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-right-radius:30px; } .radius03 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-bottom-right-radius:50px 20px; } .radius04 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-left-radius:20px 30px; } .radius05 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-radius:30px; } .radius06 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-radius:50px 30px 20px 10px; } </style> <div class="radius01">border-top-left-radius</div> <div class="radius02">border-top-right-radius</div> <div class="radius03">border-bottom-right-radius</div> <div class="radius04">border-top-left-radius</div> <div class="radius05">border-radius</div> <div class="radius06">border-radius 각각 다른값</div> 결과
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-top-left-radius
border-radius
border-radius
|
border-radius는 ie9버전 이상부터 가능.
각각 브라우저에 맞춰 식별자를 넣어줘야 함.
-moz-border-radius : 파이어폭스
-webkit-border-radius : 사파리, 크롬
-ms-border-radius : 인터넷 익스플로러
-khtml-border-radius : 콘쿼러 웹 브라우저
-o-border-radius : 오페라
