[css] border-radius 테두리(border)의 모서리를 둥글게 [펌]

[css] border-radius 테두리(border)의 모서리를 둥글게 [펌]

 

CSS3 border-radius 테두리(border)의 모서리를 둥글게

border-radius 는 IE9 이상, Firefox, Chrome, Safari, Opera 에서 지원합니다.
IE9 이하에서는 지원되지 않습니다.

border-radius 는 시계방향으로 속성값을 정하시면됩니다.
border-radius: 좌상단 우상단 우하단 좌하단 순서대로!

border-top-left-radius: 5px; /* 좌상단 */
border-top-right-radius: 5px; /* 우상단 */
border-bottom-right-radius: 5px;/* 우하단 */
border-bottom-left-radius: 5px; /* 좌하단 */

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style type="text/css"> div{width:200px; height:40px; margin:0 0 20px; padding:20px 0 0; font-size:12px; text-align:center; border:1px solid #ccc;} .box1{border-radius:10px;} .box2{border-radius:10px 10px 0;} .box3{border-radius:10px 0 10px;} .box4{border-radius:0 10px 10px;} .box5{border-radius:0 10px;} .box6{border-radius:10px 0;} </style>   <div>기본</div> <div class="box1">border-radius:10px;</div> <div class="box2">border-radius:10px 10px 0;</div> <div class="box3">border-radius:10px 0 10px;</div> <div class="box4">border-radius:0 10px 10px;</div> <div class="box5">border-radius:0 10px;</div> <div class="box6">border-radius:10px 0;</div>