값 네 개의 순서
border-radius에 값을 네 개 적으면 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래(시계 방향)로 적용됩니다. 값 두 개면 "왼쪽위·오른쪽아래 / 오른쪽위·왼쪽아래", 세 개면 "왼쪽위 / 오른쪽위·왼쪽아래 / 오른쪽아래"입니다. 이 도구는 같은 값은 자동으로 줄여 가장 짧은 표기를 만들고, 개별 속성(border-top-left-radius 등)도 함께 보여 줍니다.
px와 %의 차이
px는 요소 크기와 무관하게 고정된 곡률입니다. %는 가로 반지름은 요소 너비의, 세로 반지름은 높이의 비율로 계산되므로 정사각형이 아닌 요소에 50%를 주면 원이 아니라 타원이 됩니다. 아바타처럼 반드시 원이어야 하면 가로·세로를 같게 맞추거나 aspect-ratio: 1을 함께 씁니다. 알약 모양은 높이의 절반 이상인 큰 px 값(관례적으로 9999px)을 주면 크기에 관계없이 반원이 됩니다.
슬래시 문법 (타원형 모서리)
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%처럼 슬래시 앞은 가로 반지름, 뒤는 세로 반지름입니다. 각 모서리가 타원의 사분면으로 깎이므로 블롭(blob) 같은 유기적인 모양을 CSS만으로 만들 수 있습니다. 배경 도형이나 히어로 섹션 장식에 쓰이며, 이미지에 적용하면 마스크처럼 동작합니다.
반지름이 요소보다 클 때
인접한 두 모서리의 반지름 합이 변의 길이를 넘으면 브라우저가 모든 반지름을 같은 비율로 줄여 겹치지 않게 만듭니다. 그래서 9999px 같은 값이 안전하게 동작합니다. 다만 세 모서리는 크고 하나만 0인 경우 비율 축소가 예상과 다르게 보일 수 있으니 미리보기로 확인하는 편이 좋습니다.
자주 묻는 질문
테두리(border)가 있으면 안쪽 곡률이 달라 보여요.
안쪽 반지름은 바깥 반지름에서 테두리 두께를 뺀 값이 됩니다. 두꺼운 테두리에 작은 반지름을 주면 안쪽은 각진 모양이 되는데, 이는 규격대로의 동작입니다.
이미지에 적용했는데 모서리가 안 깎여요.
img 요소에 직접 border-radius를 주면 됩니다. 부모에 주었다면 overflow: hidden이 함께 있어야 자식이 잘립니다.