다들 아는 거겠지만 소스 긁기 쉽게 갈무리한다.
일단 소스부터.
-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;
이렇게 쓰면 왼쪽위와 왼쪽아래만 둥글게 처리된다.
즉, 처음부터 왼쪽위/오른쪽위/오른쪽아래/왼쪽아래 순으로 시계방향으로 돌리면서 적용된다.
