border-radius 퍼센트·px 차이가 다른 이유
둥근 버튼과 알약 모양 버튼은 사실 CSS 코드 한 줄 차이가 아니라, 반지름 단위(px 또는 %)와 요소의 가로세로 비율이 만나서 생기는 결과입니다. 똑같이 "50"이라는 숫자를 넣어도 px로 쓰면 완만하게 둥근 사각형이 되고, %로 쓰면 양 끝이 완전히 둥근 알약(캡슐) 모양이 될 수 있습니다. 이 차이가 어디서 오는지 계산 기준만 알면, 원하는 모서리 모양을 예측해서 만들 수 있습니다.
요약 ① px는 요소 크기와 무관한 고정 길이라서, 반지름이 짧은 변의 절반을 넘으면 브라우저가 자동으로 줄여 모서리끼리 겹치지 않게 만듭니다. ② %는 가로 반지름은 요소 너비, 세로 반지름은 요소 높이를 기준으로 각각 따로 계산되는 상대값입니다. ③ 정사각형에서는 %와 px 결과가 비슷해 보이지만, 가로세로 비율이 다른 사각형에서는 %가 타원·알약 모양을 만듭니다.
문제
버튼 하나에 border-radius: 16px를 넣었을 때는 무난히 둥근 사각형이었는데, 같은 버튼을 반응형으로 만들면서 border-radius: 50%로 바꾸자 갑자기 알약(캡슐) 모양으로 변하는 경우가 있습니다. 숫자를 그대로 옮겼을 뿐인데 결과가 완전히 달라진 것입니다.
반대의 경우도 흔합니다. 정사각형 아이콘 박스에는 border-radius: 50%가 완벽한 원을 만들어 주는데, 같은 코드를 가로로 긴 배너 이미지에 그대로 쓰면 원이 아니라 양쪽 끝이 뭉툭한 타원 모양이 나옵니다.
이런 차이가 왜 생기는지 모르면 매번 감으로 숫자를 조정해야 하고, 반응형 레이아웃에서 요소 크기가 바뀔 때마다 모서리 모양이 예측 불가능하게 흔들립니다.
해결
CSS border-radius는 단위에 따라 반지름을 계산하는 기준 자체가 다릅니다. 이 기준만 알면 어떤 요소든 모서리 모양을 미리 예측할 수 있습니다.
px 단위는 요소 크기와 상관없이 항상 같은 길이의 반지름을 적용합니다. 다만 반지름 값이 요소의 짧은 변 절반보다 크면, 맞닿은 두 모서리의 곡선이 서로 겹치게 되므로 브라우저가 반지름을 자동으로 비례해서 줄입니다. 예를 들어 높이 120px인 박스에 border-radius: 200px를 넣어도 실제로는 60px(높이의 절반)로 제한됩니다. 그래서 px 값을 요소 높이 이상으로 충분히 크게 넣으면 결과적으로 알약 모양이 만들어집니다.
% 단위는 가로 방향 반지름을 요소 너비 기준으로, 세로 방향 반지름을 요소 높이 기준으로 각각 독립적으로 계산합니다. 정사각형(너비=높이)이라면 같은 %가 같은 실제 길이가 되어 px와 비슷하게 동작하지만, 직사각형(너비≠높이)이라면 가로·세로 반지름의 실제 길이가 달라져 원이 아니라 타원 곡선이 생깁니다.
이 두 규칙을 합치면 흔히 쓰는 "알약 버튼"의 원리도 설명됩니다. border-radius: 50%를 가로로 긴 버튼에 적용하면 세로 반지름이 항상 높이의 절반(최댓값)이 되어 위아래 모서리가 완전히 둥글게 말리고, 그 결과 캡슐 모양이 나옵니다. 아주 큰 px 값(예: 9999px)도 브라우저가 짧은 변 절반으로 잘라내므로 같은 알약 모양을 만듭니다. 즉 %의 50%와 충분히 큰 px는 같은 결과에 도달하는 두 가지 다른 경로입니다.
정리하면, 정사각형에 정원을 만들고 싶다면 %든 px든 상관없지만, 요소 크기가 바뀌어도 항상 같은 비율의 둥근 모양을 유지하고 싶다면 %를, 화면 크기와 무관하게 항상 같은 곡률(예: 카드 모서리 8px)을 유지하고 싶다면 px를 쓰면 됩니다.
저희 도구로 단위와 숫자를 직접 바꿔가며 정사각형·직사각형에서 모양이 어떻게 달라지는지 눈으로 확인해보세요.
무료 · 회원가입 없음 · 네 모서리 값과 px·% 단위를 바꿔가며 CSS 코드를 바로 복사
자주 막히는 지점
| 상황 | 원인 | 확인 방법 |
|---|---|---|
| 반응형 버튼이 커지자 알약 모양에서 둥근 사각형으로 바뀜 | %가 아니라 px를 써서 요소가 커져도 반지름 길이가 고정됨 | 단위를 %로 바꾸거나, 반지름이 항상 충분히 크도록 값을 조정 |
| 정사각형 아이콘에서만 원이 되고 직사각형에서는 타원이 나옴 | %는 가로·세로 반지름을 각각 너비·높이 기준으로 따로 계산 | 요소를 정사각형으로 고정하거나, 원하는 모양에 맞게 값을 다시 설정 |
| border-radius 숫자를 키워도 더 이상 둥글어지지 않음 | 반지름이 짧은 변 절반을 넘어 브라우저가 자동으로 값을 제한 | 요소의 짧은 변 길이를 확인하고 그 절반 값 근처로 설정 |
| 네 모서리를 따로 줬는데 한쪽 모서리만 이상하게 잘려 보임 | 한 변에 맞닿은 두 모서리 반지름의 합이 그 변의 길이를 넘음 | 인접한 두 모서리 반지름의 합이 변 길이를 넘지 않는지 확인 |
정리
border-radius의 %와 px 차이는 결국 "반지름을 무엇 기준으로 계산하느냐"의 차이입니다. px는 고정 길이, %는 요소의 너비·높이를 기준으로 한 상대 길이입니다.
정사각형에서는 두 방식의 차이가 잘 드러나지 않지만, 가로세로 비율이 다른 요소에서는 %가 타원·알약 모양을, px는 둥근 사각형을 만드는 경향이 뚜렷해집니다. 어떤 모양을 만들고 싶은지 먼저 정하면 단위 선택은 자연히 따라옵니다.
무료 · 회원가입 없음 · 네 모서리 값과 px·% 단위를 바꿔가며 CSS 코드를 바로 복사
자주 묻는 질문
border-radius에 %와 px를 섞어서 써도 되나요?
네, 가능합니다. CSS는 네 모서리마다 서로 다른 값을 지정할 수 있어서 한쪽은 px, 다른 쪽은 %로 섞어 쓸 수 있습니다. 다만 모서리마다 계산 기준이 달라지면 결과를 예측하기 어려워지므로, 특별한 이유가 없다면 한 요소 안에서는 단위를 통일하는 편이 관리하기 쉽습니다.
정사각형인데 border-radius: 50%가 원이 안 됩니다. 왜 그런가요?
border, padding, box-sizing 설정 때문에 실제로 렌더링되는 가로·세로 크기가 정사각형이 아닐 수 있습니다. border-radius의 %는 실제 박스 크기를 기준으로 계산되므로, 브라우저 개발자 도구에서 요소의 실제 너비와 높이가 정확히 같은지부터 확인해 보는 것이 먼저입니다.