CSS border-radius %와 px 차이: 타원 왜곡 없이 둥근 버튼 만들기
CSS 코딩을 하다 보면 둥근 버튼을 만들 때 border-radius: 50%를 쓸지, 아니면 border-radius: 9999px(또는 16px)를 써야 할지 헷갈리는 순간을 자주 마주합니다.
정사각형(100×100px) 프로필 사진 박스에서는 **50%**를 주면 완벽한 동그라미(원)가 나오지만, 가로로 긴 직사각형(200×50px) 버튼에 똑같이 50%를 적용하면 **양쪽 끝이 찌그러진 계란 모양의 타원(Ellipse)**이 렌더링되는 기괴한 현상을 겪어보셨을 것입니다.
CSS W3C 명세에 따른 **px(고정 원형 반지름)**와 **%(가로·세로 독립 상대 타원 반지름)**의 수학적 렌더링 차이, 브라우저의 곡률 겹침 축소 알고리즘, 완벽한 알약(Pill) 버튼을 만드는 2대 공식을 완벽히 정리해 드립니다.
핵심 요약 ① px 단위 (원형 고정): 요소 크기와 상관없이 가로·세로 반지름이 동일한 고정 원호(Circular Arc)를 그리며, 짧은 변의 절반을 초과하면 브라우저가 자동 클램핑합니다. ② % 단위 (타원형 상대): 가로 반지름은 요소의 너비($W$), 세로 반지름은 요소의 높이($H$)를 기준으로 각각 따로 계산되어, 직사각형에서는 **타원(Ellipse)**이 생성됩니다. ③ 완벽한 알약(캡슐) 공식: 직사각형 버튼의 양 끝을 완벽한 반원으로 둥글리려면 '50%'가 아닌 'border-radius: 9999px' 또는 **'border-radius: 100rem'**을 사용해야 합니다. ④ 본 border-radius 시뮬레이터를 사용하면 네 모서리의 px과 % 값을 조절하며 실시간 렌더링 변화와 CSS 코드를 1초 만에 추출할 수 있습니다.
px vs %의 기하학적 렌더링 계산 공식 차이
CSS 렌더링 엔진은 border-radius의 단위에 따라 전혀 다른 기하학 방정식을 풉니다:
1. px 단위 (Circular Arc, 원형 곡률)
$$r_x = r_y = ext{입력된 px 수치}$$
- 항상 가로 반지름($r_x$)과 세로 반지름($r_y$)이 같은 완벽한 원의 호를 그립니다.
- 박스 크기가 $200 imes 50 ext{px}$일 때 border-radius: 20px를 주면 사방 모서리에 반지름 20px짜리 원형 곡선이 깔끔하게 들어갑니다.
2. % 단위 (Elliptical Arc, 타원 곡률)
$$r_x = W imes ( ext{Percentage} / 100), quad r_y = H imes ( ext{Percentage} / 100)$$
- 정사각형 ($W = H = 100 ext{px}$):
- $r_x = 100 imes 0.5 = 50 ext{px}$, $r_y = 100 imes 0.5 = 50 ext{px} implies$ 완벽한 원 (Circle)
- 가로 직사각형 ($W = 200 ext{px}, H = 50 ext{px}$):
- $r_x = 200 imes 0.5 = mathbf{100 ext{px}}$, $r_y = 50 imes 0.5 = mathbf{25 ext{px}}$
- 가로 반지름이 세로보다 4배 긴 타원 곡선이 양 끝에 생겨 찌그러진 럭비공 형태가 됩니다.
무료 · 4방향 모서리 조절만으로 1초 만에 최적의 border-radius CSS 코드 즉시 추출
📖 실무 웹 퍼블리싱 및 UI 디자인에서 겪는 border-radius 참사 사연
사연 1: 반응형 버튼에 50% 줬다가 타원 럭비공으로 찌그러진 퍼블리셔
웹 퍼블리셔 A씨는 버튼을 둥글게 만들기 위해 border-radius: 50%를 선언했습니다. PC 화면에서는 그럭저럭 캡슐처럼 보였으나, 텍스트가 길어지거나 화면 너비가 넓어질수록 버튼 양 끝이 기괴한 타원형으로 찌그러져 UI 디자이너에게 전면 재수정 요청을 받았습니다. border-radius: 9999px로 한 줄 수정하여 어떤 가로 너비에서도 완벽한 반원형 캡슐을 유지하도록 해결했습니다.
사연 2: 프로필 아바타 이미지에 px 줬다가 기기별로 찌그러진 주니어 개발자
프론트엔드 개발자 B씨는 사용자 아바타 이미지를 동그랗게 만들기 위해 width: 100%; border-radius: 40px;를 부여했습니다. 80×80px 크기에서는 원이었지만, 태블릿 화면에서 아바타 박스가 120×120px로 커지자 둥근 사각형으로 풀려버렸습니다. 정사각형 아바타는 aspect-ratio: 1 / 1; border-radius: 50%;를 써야 반응형 크기 변화에도 항상 완벽한 원형이 유지됨을 체득했습니다.
사연 3: 8개 슬래시(/) 문법을 몰라 유기적 곡선(Organic Shape) 구현에 고전한 디자이너
C 디자이너는 트렌디한 비정형 블롭(Blob) UI 카드를 만들기 위해 SVG를 일일이 그렸습니다. CSS에서 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%처럼 슬래시(/)를 기준으로 수평/수직 반지름 8개를 따로 제어할 수 있다는 사실을 알고 CSS 한 줄로 가벼운 인터랙티브 블롭을 구현했습니다.
🔬 핵심 기술 메커니즘 — W3C 모서리 중첩 방지 스케일링 공식 ($f$)
두 모서리의 곡률 합이 박스의 변 길이($L$)를 초과할 때 브라우저가 깨짐을 방지하는 알고리즘을 분석합니다.
1. W3C 모서리 오버랩 축소 인자 ($f$) 공식
$$f = minleft(1, rac{W}{r_{ ext{top-left}, x} + r_{ ext{top-right}, x}}, rac{H}{r_{ ext{top-left}, y} + r_{ ext{bottom-left}, y}}, dots ight)$$
- 모든 반지름에 축소 비율 $f$를 곱하여 **$r' = r imes f$**로 스케일링합니다.
- 예를 들어 높이가 $50 ext{px}$인 버튼에 border-radius: 9999px를 주면:
- 세로 방향 합: $9999 + 9999 = 19,998 ext{px}$
- 스케일 인자: $f = 50 / 19998 approx 0.0025$
- 실제 적용 반지름: $9999 imes 0.0025 = mathbf{25 ext{px}}$ (정확히 높이 $50 ext{px}$의 절반인 $25 ext{px}$로 클램핑되어 완벽한 캡슐 달성).
📊 CSS border-radius 단위 및 표현 방식 완벽 비교
| 단위 / 표기법 | 기하학적 형태 | 직사각형($W
eq H$) 결과 | 추천 용도 | |---|---|---|---| | 고정 px (예: 8px) | 원형 호 (Circular) | 사방 모서리 균일한 8px 곡률 | 카드 컴포넌트, 모달창, 인풋 박스 | | 상대 % (예: 50%) | 타원형 호 (Elliptical) | 찌그러진 타원 (Egg shape) | 정사각형 아바타 이미지, 원형 아이콘 | | 극대값 9999px | 자동 클램핑 반원 | 완벽한 알약 (Pill / Capsule) | CTA 액션 버튼, 태그 배지 | | 8개 슬래시 (H / V) | 독립 수평/수직 타원 | 유기적 비정형 도형 (Blob) | 감성 랜딩 페이지 배경, 크리에이티브 UI |
⚠️ border-radius 사용 시 흔히 하는 5가지 실수
- 가로 직사각형 버튼에 border-radius: 50% 선언: 양 끝이 계란형 타원으로 찌그러지는 전형적인 실수.
- 정사각형이 아닌 직사각형 이미지에 50%로 원 만들기 시도: 동그라미가 아닌 타원이 되어 이미지가 왜곡되어 보임.
- 부모 박스의 overflow: hidden 누락: 자식 이미지나 배경색이 둥근 모서리 밖으로 삐져나오는 현상.
- 테두리(border) 두께와 안쪽 곡률 불일치: 외부 테두리와 내부 콘텐츠 사이에 빈 틈이 생기는 현상 (안쪽 반지름은 $r - ext{border-width}$).
- 네 모서리 단축 속성 순서 혼동: 시계 방향(Top-Left ➔ Top-Right ➔ Bottom-Right ➔ Bottom-Left) 규칙을 헷갈리는 것.
💡 완벽한 둥근 UI 제작 5단계 실전 워크플로우
- 1단계 (요소의 종횡비 확인): 만들고자 하는 컴포넌트가 1:1 정사각형인지 가로 직사각형인지 확인합니다.
- 2단계 (목표 형태 결정): 정원(Circle), 알약형(Pill), 은은한 라운드(Card), 비정형(Blob) 중 하나를 선택합니다.
- 3단계 (단위 규칙 적용):
- 1:1 정사각형 원 ➔ border-radius: 50%
- 직사각형 알약 버튼 ➔ border-radius: 9999px (또는 rounded-full)
- 모던 카드 UI ➔ border-radius: 12px (또는 0.75rem)
- 4단계 (부모-자식 테두리 조화): 테두리가 있다면 내부 패딩 요소의 곡률을 $ ext{Outer Radius} - ext{Border Width}$로 맞춥니다.
- 5단계 (본 생성기에서 CSS 코드 복사): 슬라이더로 미세 조절한 완벽한 코드를 복사해 프로젝트에 붙여넣습니다.
🔍 프론트엔드 UI 엔지니어가 공개하는 CSS 팁 7선
- Tailwind CSS rounded-full의 내부 구현: Tailwind의 rounded-full 클래스는 border-radius: 9999px;로 구현되어 있습니다.
- 중첩 박스 내부 곡률 공식: $$ ext{Inner Radius} = max(0, ext{Outer Radius} - ext{Padding})$$ 이를 지켜야 카드 내부 이미지의 모서리가 바깥 모서리와 평행하게 예쁘게 맞물립니다.
- CSS calc()를 활용한 높이 기반 알약: border-radius: calc(var(--button-height) / 2);
- 슬래시(/) 문법으로 잎사귀 모양 만들기: border-radius: 0 100% 0 100% / 0 100% 0 100%;
- GPU 앤티앨리어싱(Anti-aliasing) 팁: 둥근 모서리에 미세한 계단 현상이 보일 때는 box-shadow: 0 0 1px transparent;를 주면 매끄럽게 블러 처리됩니다.
- border-radius 애니메이션: 마우스 호버 시 transition: border-radius 0.3s ease로 사각형에서 알약형으로 부드럽게 변형시킬 수 있습니다.
- 본 생성기 북마크 등록: 복잡한 4방향 모서리 및 슬래시 타원 문법을 눈으로 보며 1초 만에 추출하세요.
🎯 최종 결정 트리: 어떤 border-radius 값을 써야 할까?
- 경우 A (프로필 아바타, 1:1 정사각 원형 아이콘) ➔ aspect-ratio: 1/1; border-radius: 50%;
- 경우 B (로그인 버튼, 검색창, 태그 배지 캡슐) ➔ border-radius: 9999px;
- 경우 C (대시보드 카드, 모달 팝업, 폼 인풋) ➔ border-radius: 8px ~ 16px; (px/rem)
- 경우 D (유기적 비정형 배경 디자인) ➔ border-radius: 60% 40% 30% 70% / ... (슬래시 문법)
📑 CSS 테두리 곡률 & 렌더링 핵심 용어 치트시트
- Border Radius: CSS 박스 모델의 외곽 모서리를 둥글게 깎아내는 속성.
- Elliptical Arc (타원호): 수평 반지름($r_x$)과 수직 반지름($r_y$)이 다른 타원의 곡선 구간.
- Clamping (클램핑): 모서리 곡률의 합이 변 길이를 초과할 때 브라우저가 비례 축소하는 안전 메커니즘.
- Pill Shape (알약 형태): 좌우 끝부분이 완전한 반원형($r = H/2$)으로 마감된 캡슐형 UI.
자주 묻는 질문
왜 버튼에 border-radius: 50px 대신 9999px를 쓰나요?
버튼의 텍스트가 길어지거나 패딩이 늘어나 높이가 120px로 커지면, 고정 50px은 더 이상 완전한 알약이 되지 않고 둥근 사각형이 됩니다. 반면 9999px를 주면 버튼 높이가 50px이든 200px이든 항상 브라우저가 높이의 절반으로 자동 맞춰 완벽한 캡슐을 영구 보장하기 때문입니다.
둥근 모서리를 준 카드 안의 사진이 사각형으로 삐져나오는데 어떻게 해결하나요?
카드 부모 요소의 CSS에 overflow: hidden; 속성을 추가해 주시면, 자식 이미지나 배경이 부모의 둥근 모서리 곡률에 맞춰 깔끔하게 마스킹(잘림) 처리됩니다.
본 도구에서 생성된 CSS 코드가 모든 최신 브라우저에서 호환되나요?
네, 표준 CSS3 border-radius 문법을 준수하므로 Chrome, Safari, Firefox, Edge 등 모든 모던 웹 브라우저와 모바일 환경에서 100% 동일하게 렌더링됩니다.