타원 반지름은 언제 쓸모 있나요?

주로 일러스트의 유기적 '블랍' 모양 — 코너마다 비대칭. 표준 UI는 거의 균일 또는 4값.

%는 요소의 가로/세로에 상대적 — 정사각에 50%면 원, 직사각에 50%면 타원. px는 요소 크기와 무관히 절대값.

정사각형에 필 프리셋이 이상해 보여요.

Pill = 999px는 요소가 세로보다 가로 길다고 가정. 정사각이면 그냥 원이 됩니다.

4값 `border-radius`와 타원 문법은 2010년 이후 모든 브라우저 지원. 어디서나 안전.

Border Radius 생성기

색상

시각적 border-radius 편집기: 균일 모드(빠른 라운딩), 코너별 모드(채팅 버블·탭), 타원 모드(블랍 — 가로 반지름 ≠ 세로). 손으로 만들 법한 흔한 형태들의 프리셋 제공. 단위는 `px`·`%`·`rem`. 출력은 가능한 짧은 유효 CSS — 모든 코너가 같으면 한 값, 다르면 4값, 타원이면 `h / v` 풀 문법.

—

프리셋

균일 (모든 코너 같은 값)타원 (가로 / 세로)단위Color

All corners16px

미리보기

CSS

border-radius: 16px;

사용법

프리셋으로 시작하거나 '균일' 해제 후 코너별 편집.
블랍 모양엔 '타원' 토글(각 코너에 두 반지름).
`border-radius: …`를 복사해 CSS에 붙여넣기.

자주 묻는 질문

타원 반지름은 언제 쓸모 있나요?: 주로 일러스트의 유기적 '블랍' 모양 — 코너마다 비대칭. 표준 UI는 거의 균일 또는 4값.
px vs % 반지름?: %는 요소의 가로/세로에 상대적 — 정사각에 50%면 원, 직사각에 50%면 타원. px는 요소 크기와 무관히 절대값.
정사각형에 필 프리셋이 이상해 보여요.: Pill = 999px는 요소가 세로보다 가로 길다고 가정. 정사각이면 그냥 원이 됩니다.
브라우저 지원?: 4값 `border-radius`와 타원 문법은 2010년 이후 모든 브라우저 지원. 어디서나 안전.

Border Radius 생성기

사용법

자주 묻는 질문

관련 도구

색맹 시뮬레이터

CSS Box Shadow 생성기

컬러 포맷 변환기

CSS 그라디언트 생성기

컬러 팔레트 생성기

색상 대비 검사기