다들 아는 거겠지만 소스 긁기 쉽게 갈무리한다.

일단 소스부터.

-moz-border-radius: 10px; 
-webkit-border-radius: 10px;

위처럼 하면 반지금 10px로 모서리를 둥글게 처리한다. -moz-가 붙은 게 모질라 엔젠(즉, 파이어폭스 등)에서 지원하는 것이고, -webkit-이 붙은 게 웹킷 엔진(즉, 크롬과 사파리 등)에서 지원하는 것이다.

위 CSS는 각각 아래처럼 각 모서리별로 다르게 사용할 수 있다. 이 표는 CSS: border-radius and -moz-border-radius에서 퍼온 것이다.

CSS3 (아직 사용 불가) 모질라 엔진(파폭 등) 웹킷 엔진(크롬,사파리 등)
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

역시 축약형도 있다.

-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius 10px 0 0 10px;

이렇게 쓰면 왼쪽위와 왼쪽아래만 둥글게 처리된다.

즉, 처음부터 왼쪽위/오른쪽위/오른쪽아래/왼쪽아래 순으로 시계방향으로 돌리면서 적용된다.