둥근 모서리 디자인 — border-radius 제대로 쓰기
요즘 UI에서 직각 모서리를 찾기가 더 어렵습니다. 그런데 둥글기는 "적당히 8px"로 끝나지 않습니다 — 버튼·카드·알약·원이 각각 다른 문법을 쓰고, 카드 안의 카드처럼 중첩될 때는 공식이 따로 있습니다. 한 번 정리해 두면 평생 쓰는 내용입니다.
문법 — px·%·모서리별 지정
- 값 1개 —
border-radius: 12px: 네 모서리 모두 12px. - 값 4개 —
border-radius: 12px 12px 0 0: 왼쪽 위부터 시계방향. 위만 둥근 시트·탭에. - 퍼센트 — 가로·세로에 각각 적용됩니다.
50%는 정사각형에서 원, 직사각형에서 타원. - 모서리마다 다른 값 —
border-top-left-radius등 개별 속성, 또는 단축 표기로 비대칭 모양(말풍선 꼬리 쪽만 직각 등)을 만듭니다. - 가로/세로 분리 —
border-radius: 24px / 12px처럼 슬래시를 쓰면 타원형 모서리도 가능합니다.
알약·원 만들기
| 모양 | 방법 | 주의 |
|---|---|---|
| 알약(pill) 버튼 | border-radius: 9999px | 50%를 쓰면 타원으로 찌그러짐 |
| 원형 아바타 | 정사각형 + border-radius: 50% | 비정사각형이면 타원이 됨 — object-fit: cover 병용 |
| 위만 둥근 시트 | border-radius: 16px 16px 0 0 | 바닥에 붙는 바텀시트·탭의 정석 |
중첩 radius 공식
카드 안의 이미지, 모달 안의 버튼 — 둥근 것 안에 둥근 것이 들어갈 때 어색함의 원인은 대부분 이것입니다.
- 공식: 안쪽 radius = 바깥 radius − 간격(padding).
- 예: radius 16px 카드, 안쪽 여백 12px → 안의 이미지는
16 − 12 = 4px. - 이렇게 하면 두 곡선의 중심이 일치해 모서리 두께가 고르게 보입니다.
- 안팎을 같은 값으로 주면 안쪽 모서리가 더 두꺼워 보입니다 — 흔한 어색함의 정체.
용도별 권장값
- 입력창·작은 버튼 — 6~10px: 단정하고 클릭 가능해 보이는 범위.
- 카드·패널 — 12~16px: 콘텐츠 덩어리의 표준.
- 모달·큰 시트 — 16~24px: 면적이 클수록 radius도 키워야 비례가 맞습니다.
- 태그·뱃지 — 9999px 알약: 작고 둥근 정보 조각.
- 일관성이 핵심 — 사이트 전체에서 radius 단계를 2~3개(예: 8/12/16px)로 제한하면 통일감이 생깁니다. CSS 변수로 정의해 두면 관리가 쉽습니다.
border-radius를 요소 높이의 절반 이상으로 주면 됩니다. 높이를 매번 계산하기 번거로우므로 실무에서는 9999px처럼 충분히 큰 값을 관용적으로 씁니다 — 브라우저가 가능한 최대(높이의 절반)로 알아서 잘라 주기 때문에 어떤 높이에서도 완전한 반원 끝이 됩니다. 50%를 쓰면 안 됩니다. 퍼센트는 가로·세로 각각에 적용되어 가로가 긴 버튼은 타원처럼 찌그러집니다.
안쪽 radius = 바깥 radius − 간격(padding) 공식을 쓰면 두 곡선의 중심이 일치해 자연스럽게 보입니다. 예를 들어 radius 16px인 카드 안에 12px 여백을 두고 이미지를 넣는다면 이미지의 radius는 4px이 맞습니다. 안팎을 같은 값으로 주면 안쪽 모서리가 바깥쪽보다 두꺼워 보이는 어색함이 생깁니다. 이 공식 하나만 적용해도 디자인 완성도가 눈에 띄게 올라갑니다.
네, 단 요소가 정사각형일 때만 완전한 원이 됩니다. border-radius: 50%는 가로의 50%, 세로의 50%를 각각 둥글리므로 정사각형에서는 원, 직사각형에서는 타원이 됩니다. 프로필 이미지는 width와 height를 같게 지정하고 50%를 주는 것이 정석이며, 원본 사진의 비율이 다르면 object-fit: cover로 채우면 됩니다.