CSS의 border-radius 속성을 사용하면 요소의 네 모서리를 둥글게 처리할 수 있습니다. 이 속성 하나만으로 각진 박스를 부드러운 곡선 형태로 바꿀 수 있어, 버튼·카드·이미지 등 다양한 UI 요소에 폭넓게 활용됩니다.
border-radius 기본 사용법
border-radius 값은 픽셀(px), 퍼센트(%) 등 다양한 단위로 지정할 수 있으며, 값을 크게 설정할수록 모서리가 더 둥글어집니다. 아래 예제 코드를 실행하면 둥근 모서리가 적용된 요소를 확인할 수 있습니다.
예제 코드
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorner">둥근 모서리!</p>
</body>
</html>코드 설명
위 예제에서 #rcorner 선택자는 초록색(#8AC007) 배경을 가진 200×150px 크기의 요소를 정의합니다. 핵심인 border-radius: 25px; 선언으로 인해 네 개의 모서리가 각각 25px 반경의 곡선으로 처리되어 부드러운 사각형이 완성됩니다.
모서리별로 다르게 지정하기
값을 하나만 입력하면 네 모서리가 모두 동일하게 적용되지만, 공백으로 구분해 최대 네 개의 값을 지정하면 각 모서리를 개별적으로 조절할 수 있습니다.
- 값 1개: 네 모서리 모두 동일하게 적용
- 값 2개: 첫 번째 값은 좌상단·우하단, 두 번째 값은 우상단·좌하단에 적용
- 값 4개: 시계 방향(좌상단 → 우상단 → 우하단 → 좌하단) 순서로 각각 적용
예를 들어 border-radius: 10px 30px 10px 30px;처럼 작성하면 마름모 형태의 독특한 디자인도 손쉽게 구현할 수 있습니다.