smith버튼 모서리를 둥글게 하려고 border-radius: 8px를 쓰는 건 누구나 하지만, 값이 두세 개 이상 들어가거나 %와 슬래시가 나오면 갑자기 헷갈려요. 결론부터 말하면 border-radius는 왼쪽 위에서 시작해 시계 방향(왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래)으로 읽고, 슬래시 앞은 가로 반지름, 뒤는 세로 반지름이에요. 그리고 한 변에서 양 끝 모서리의 반지름 합이 그 변 길이를 넘으면 브라우저가 모든 반지름을 같은 비율로 줄여 그려요.
이 두 가지만 알면 원, 알약 버튼, 위만 둥근 카드, 물방울(블롭) 모양까지 한 줄로 만들 수 있어요. 아래에서 읽는 법, 모양별 값, 줄어드는 규칙을 숫자로 계산해 보고, 마지막에 실수하기 쉬운 부분을 정리했어요. 값을 바꿔 가며 미리 보려면 CSS border-radius 생성기를 열어 두고 따라 해 보세요.
border-radius는 네 속성의 줄임 표기예요
border-radius는 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 네 속성을 한꺼번에 쓰는 줄임 속성이에요. 줄임 표기에서 값을 몇 개 쓰느냐에 따라 의미가 달라져요. 속성 정의와 문법은 MDN의 border-radius 문서에 정리돼 있어요.
| 값 개수 | 예시 | 의미 |
|---|---|---|
| 1개 | 8px | 네 모서리 모두 8px |
| 2개 | 10px 20px | 왼쪽 위·오른쪽 아래 10px, 오른쪽 위·왼쪽 아래 20px |
| 3개 | 10px 20px 30px | 왼쪽 위 10px, 오른쪽 위·왼쪽 아래 20px, 오른쪽 아래 30px |
| 4개 | 10px 20px 30px 40px | 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서 |
외우기 쉬운 방법은 margin, padding과 같은 방식이라는 거예요. 위에서 시작해 시계 방향으로 돌고, 값이 모자라면 반대편 값을 가져와요. 다만 margin은 위·오른쪽·아래·왼쪽 변이지만 border-radius는 모서리라서 시작점이 왼쪽 위 모서리라는 점만 달라요.
그림으로 보는 네 가지 모양
모양별 코드를 정리하면 아래와 같아요.
| 모양 | 조건 | 코드 |
|---|---|---|
| 둥근 카드 | 어떤 크기든 | border-radius: 12px; |
| 원 | 너비와 높이가 같은 요소 | border-radius: 50%; |
| 타원 | 너비와 높이가 다른 요소 | border-radius: 50%; |
| 알약 | 반지름이 높이의 절반 이상 | 높이 60px이면 border-radius: 30px; |
| 위만 둥근 탭·바텀시트 | 아래 두 모서리는 0 | border-radius: 16px 16px 0 0; |
| 말풍선 | 한 모서리만 작게 | border-radius: 18px 18px 18px 2px; |
px와 %는 무엇이 다른가요
px는 상자 크기와 상관없이 고정된 반지름이에요. 카드나 버튼에서 모서리 느낌을 일정하게 유지하고 싶을 때 쓰죠. %는 상자 크기에 비례하는데, 가로 반지름은 상자 너비 기준, 세로 반지름은 상자 높이 기준이에요.
그래서 200×100px 상자에 border-radius: 50%를 주면 모서리마다 가로 반지름 100px, 세로 반지름 50px의 타원호가 만들어지고, 상자 전체가 타원이 돼요. 가로 방향으로는 양 끝 반지름 합이 200px로 너비와 같고, 세로 방향으로는 50 + 50 = 100px로 높이와 같아서 딱 맞아요. 같은 코드를 정사각형에 쓰면 원이 되는 이유도 같아요.
반지름이 너무 크면 줄어들어요 — 직접 계산해 보기
값을 크게 줬는데 모양이 더 둥글어지지 않는 경우가 있어요. 한 변에서 양 끝 모서리의 반지름 합이 변 길이보다 크면, 브라우저가 모든 모서리의 반지름을 같은 비율 f로 줄여서 맞춰요. CSS 명세(W3C CSS Backgrounds and Borders Module Level 3)는 각 변에서 변 길이 ÷ 반지름 합을 구한 값 중 가장 작은 값을 f로 쓰도록 정하고 있어요. f가 1보다 작을 때만 줄어들고, 줄어든 뒤에는 네 모서리가 모두 같은 비율로 작아져요.
가장 쉬운 예는 100×100px 상자예요. 모서리를 80px로 주면 위쪽 변의 반지름 합이 160px로 변 길이 100px보다 커요. f = 100 ÷ 160 = 0.625이므로 실제 반지름은 80 × 0.625 = 50px이고, 결국 원이 돼요. 반지름을 20, 40, 50, 60, 80px로 바꿔 가며 실제 적용 값을 계산하면 이렇게 돼요.
알약 버튼도 같은 원리예요. 200×60px 상자에서 반지름을 바꿔 보면 아래처럼 30px 이후에는 달라지지 않아요.
높이 60px의 절반인 30px에서 완전한 반원이 돼요.
표로 보기
| 구분 | 실제 적용 |
|---|---|
| 10 | 10 |
| 20 | 20 |
| 30 | 30 |
| 40 | 30 |
| 60 | 30 |
| 100 | 30 |
그래서 높이를 모르거나 높이가 바뀌는 버튼에 border-radius: 9999px를 쓰면 언제나 양 끝이 반원인 알약이 돼요. 9999px를 쓴 높이 60px 버튼은 f = 60 ÷ 19998이 되어 실제로는 약 30px로 계산돼요.
한 변만 넘쳐도 네 모서리가 전부 줄어요
함정은 f가 한 변에서만 정해져도 네 모서리 전체에 적용된다는 점이에요. 100×100px 상자에서 왼쪽 위 70px, 오른쪽 위 50px, 나머지는 0이면 위쪽 변의 합이 120px예요. f = 100 ÷ 120 ≈ 0.8333이라서 70px는 약 58.3px, 50px는 약 41.7px로 줄어요. 의도한 70px 곡선이 나오지 않아 당황스러울 수 있는데, 이때는 위쪽 변의 합이 변 길이를 넘는지부터 확인하세요.
가로·세로를 따로 주는 슬래시 문법과 블롭
모서리를 원이 아닌 타원호로 만들 때 슬래시를 써요. border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%는 슬래시 앞 네 값이 가로 반지름, 뒤 네 값이 세로 반지름이에요. 200×200px 상자라면 왼쪽 위 모서리는 가로 120px, 세로 120px이고, 오른쪽 위는 가로 80px, 세로 60px이에요.
각 변의 합을 보면 위쪽 가로 60 + 40 = 100%, 아래쪽 가로 30 + 70 = 100%, 왼쪽 세로 60 + 40 = 100%, 오른쪽 세로 30 + 70 = 100%예요. 마주 보는 두 모서리의 합이 100%가 되게 맞추면 줄어드는 일 없이 곡선이 변 전체를 부드럽게 채워서 자연스러운 물방울 모양이 돼요. 합이 100%를 넘기면 f가 줄어들어서 오히려 밋밋해져요. 이 방식으로 만든 블롭에 CSS 그라데이션을 입히면 배경 장식으로 쓰기 좋아요.
실무에서 자주 하는 실수
- 자식 이미지가 모서리를 삐져나와요. 부모에
border-radius만 주면 자식은 잘리지 않아요. 부모에overflow: hidden을 같이 주거나, 자식에도 같은 반지름을 줘야 해요. - 테두리가 있으면 안쪽 곡선이 달라요. 안쪽 모서리의 반지름은 바깥 반지름에서 테두리 두께를 뺀 값이에요. 반지름 12px에 테두리 4px이면 안쪽은 8px, 테두리가 12px 이상이면 안쪽은 직각이 돼요.
- 그림자도 곡선을 따라가요.
box-shadow는 요소의 둥근 모서리 모양을 그대로 따라 그려져요. 그림자 값은 CSS 박스 섀도우 생성기로 같이 맞춰 보세요. - 안쪽 요소의 반지름은 바깥보다 작게. 바깥 카드가 16px이고 안쪽 여백이 8px이면 안쪽 이미지는 바깥 반지름에서 여백을 뺀 8px 안팎이 자연스러워요. 정해진 규칙은 아니고 보기 좋은 경험칙이에요.
- 반응형에서 값이 고정돼요. 화면 폭에 따라 모서리 느낌도 부드럽게 바꾸고 싶다면 clamp() 공식으로 만든 값을
border-radius에 쓸 수 있어요. 길이 값을 받는 속성이라 똑같이 적용돼요.
자주 묻는 질문
border-radius 순서가 왜 왼쪽 위부터인가요?
margin, padding처럼 시계 방향으로 읽는 CSS 줄임 표기의 관례를 따르고, 시작점이 위쪽 변의 왼쪽 끝이라 왼쪽 위 모서리부터 시작해요. 값이 모자라면 반대편 모서리의 값을 가져와요.
원을 만들었는데 타원이 나와요.
50%는 너비와 높이에 각각 비례해서 계산되기 때문이에요. 너비와 높이가 같을 때만 원이 돼요. 너비와 높이가 다를 수 있는 요소에 항상 원을 만들고 싶다면 aspect-ratio: 1로 비율을 고정하세요.
알약 버튼에 9999px를 써도 되나요?
괜찮아요. 위에서 계산했듯이 반지름이 너무 크면 브라우저가 변 길이에 맞게 줄여 주기 때문에 양 끝이 반원인 알약이 돼요. 높이가 바뀌는 버튼에서 특히 편해요.
슬래시가 들어간 값은 언제 쓰나요?
모서리를 원호가 아닌 타원호로 만들 때 써요. 블롭 모양, 비대칭 말풍선, 알약과 비슷하지만 끝이 살짝 납작한 모양을 만들 때 유용해요.
border-radius를 0으로 되돌리려면요?
border-radius: 0을 쓰면 직각이 돼요. 0은 단위를 생략할 수 있어요. 아래만 직각이고 위만 둥글게 하려면 16px 16px 0 0처럼 필요한 모서리만 값을 줘요.
정리
border-radius는 왼쪽 위에서 시계 방향으로 읽고, 슬래시 앞뒤로 가로·세로 반지름을 나눠 쓴다는 두 가지가 핵심이에요. 모양별로는 정사각형 50%가 원, 높이 절반 이상이 알약, 마주 보는 모서리의 합이 100%인 가로·세로 값이 블롭이에요. 값을 크게 줘도 변 길이를 넘으면 f만큼 줄어드니 의도한 모양이 안 나오면 합부터 확인하세요. 값을 바꿔 가며 눈으로 확인하려면 CSS border-radius 생성기를 쓰고, 반응형 값은 CSS clamp() 계산기와 함께 쓰면 좋아요.