CSS3의 둥근 모서리(Rounded Corners)는 border-radius 속성을 사용하여 요소의 모서리를 부드럽게 처리하거나 특별한 색상의 코너 효과를 추가하는 기능입니다. 이미지, 버튼, 카드 등 다양한 UI 요소에 활용되며, 별도의 이미지 없이도 세련된 디자인을 구현할 수 있습니다.
기본 문법
둥근 모서리의 기본적인 작성 방식은 다음과 같습니다.
#rcorners {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}위 예제에서 60px/15px처럼 슬래시(/)를 사용하면 수평 반경과 수직 반경을 각각 지정할 수 있어 타원형 모서리 표현도 가능합니다.
border-radius 관련 속성 정리
다음 표는 둥근 모서리를 구현할 때 사용할 수 있는 주요 속성값을 정리한 것입니다.
| 속성 | 설명 |
|---|---|
| border-radius | 네 개의 모서리 반경을 한 번에 설정하는 축약형 속성입니다. |
| border-top-left-radius | 왼쪽 위(top-left) 모서리의 반경을 개별적으로 설정합니다. |
| border-top-right-radius | 오른쪽 위(top-right) 모서리의 반경을 개별적으로 설정합니다. |
| border-bottom-right-radius | 오른쪽 아래(bottom-right) 모서리의 반경을 개별적으로 설정합니다. |
| border-bottom-left-radius | 왼쪽 아래(bottom-left) 모서리의 반경을 개별적으로 설정합니다. |
활용 팁
border-radius에 하나의 값만 지정하면 네 모서리가 모두 동일하게 적용됩니다. 예를 들어 border-radius: 50%를 적용하면 요소가 원 형태로 변하며, 값이 클수록 모서리가 더 많이 둥글어집니다. 또한 픽셀(px) 대신 백분율(%)이나 em 단위를 사용해 반응형 디자인에 유연하게 대응할 수 있습니다.