(css) border-radius

박스 모서리 둥글게 만들기

border-top-left-radius: <크기> | <백분율>

border-top-right-radius: <크기> | <백분율> 

border-bottom-right-radius: <크기> | <백분율>

border-bottom-left-radius: <크기> | <백분율>

border-radius: <크기> | <백분율>

div {
   width: 300px; /* 너비 */
   height: 200px; /* 높이 */
   margin : 20px; /* 영역간 마진 */
   display: inline-block; /* 가로로 배치 */
}
.round {
   border:2px solid red; /* 2px짜리 빨강 실선 */
   border-radius:20px;  /* 모서리 20px 만큼 라운딩 */
}

타원 형태로 둥글게 만들기

border-top-left-radius: <가로 크기> <세로 크기>

border-top-right-radius: <가로 크기> <세로 크기>

border-bottom-right-radius: <가로 크기> <세로 크기>

border-bottom-left-radius: <가로 크기> <세로 크기>

border-radius: <가로 크기> <세로 크기>

.round1 { border-top-left-radius:100px 50px; } /* 왼쪽 위 라운딩 */
.round2 { border-bottom-right-radius:50% 30%; }

출처 : Doit! html5 + css3 웹표준의 정석