핵심 요점
- 013가지 모드 — 균등, 코너별, 타원형 — 간단한 둥근 버튼부터 유기적인 blob 모양까지 모든 것을 포함합니다.
- 02px, %, rem 단위를 지원하며 각각 다른 스케일링 동작을 합니다.
- 03타원형 모드는 CSS의 완전한 border-radius 구문을 위해 코너별 수평 및 수직 반지름을 노출합니다.
- 04라이브 미리보기는 실제 CSS 속성을 사용하므로 표시되는 내용이 브라우저가 렌더링할 내용과 정확히 같습니다.
간단한 둥근 모서리부터 유기적인 Blob 모양까지
4개 모서리 border-radius 값은 메모리에서 입력하기 충분히 쉽습니다 — border-radius: 8px. 하지만 코너별로 다른 반지름이 필요하거나 유기적인 모양을 원할 때 CSS 타원형 구문을 사용하면 단축형은 빠르게 복잡해집니다. 전체 형식은 top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — 특정 순서의 8개 값입니다.
Handytool의 border-radius 생성기를 사용하면 모든 모드에서 각 코너의 슬라이더를 드래그하고 모양이 실시간으로 업데이트되는 것을 볼 수 있습니다. px, %, rem 사이를 전환하세요. 재계산할 필요 없이 완료되면 정확한 단축형 또는 장형식 CSS 선언을 복사하세요.
Border Radius를 디자인하는 방법
- 01
모드를 선택하세요
균등 모드는 4개 모서리 모두에 하나의 반지름을 적용합니다. 코너별 모드는 각 코너를 독립적으로 제어합니다. 타원형 모드는 코너당 별도의 수평 및 수직 반지름을 추가합니다.
- 02
단위를 선택하세요
절대 크기는 px, 요소의 치수에 따라 스케일되는 값은 %, 루트 글꼴 크기와 연결된 크기는 rem을 선택하세요.
- 03
슬라이더를 드래그하세요
반지름 값을 조정하고 미리보기 요소가 실시간으로 업데이트되는 것을 감시하세요. 코너별 모드의 경우 각 코너의 슬라이더를 독립적으로 드래그하세요.
- 04
모양을 미리보세요
미리보기 상자는 실제 CSS border-radius 속성을 적용하므로 표시되는 모양이 브라우저가 렌더링할 모양입니다.
- 05
CSS를 복사하세요
복사를 클릭하여 border-radius 선언을 복사하고 스타일시트에 붙여넣으세요.
일반적인 모양 및 각 모드를 사용할 때
- 01알약 버튼: 균등 % 모드, 50%로 설정 — 항상 버튼 너비에 관계없이 전체 알약
- 02미묘한 둥근 카드: 균등 px 모드, 8–16px — 가장 일반적인 UI 패턴
- 03비대칭 태그 또는 레이블: 코너별 모드, 한쪽은 날카로움, 다른 쪽은 둥금
- 04아바타 원: 균등 % 모드, 50% — 이미지 컨테이너에 맞게 스케일됨
- 05유기적 blob 모양: 코너별로 다른 X/Y 값이 있는 타원형 모드
즉시 미리보기, 아무것도 업로드되지 않습니다
border-radius 생성기는 완전히 클라이언트 측입니다. 슬라이더, 모드 전환 및 단위 변경은 모두 서버 왕복 없이 미리보기를 즉시 업데이트합니다. 계정이 없고 속도 제한이 없습니다.
도구는 모든 최신 브라우저에서 작동합니다. border-radius 속성 — 타원형 X/Y 구문 포함 — 모든 에버그린 버전의 Safari, Firefox, Edge 및 Chrome에서 지원되므로 벤더 접두사 또는 대체 없이 사용하기에 안전합니다.
Border-Radius 생성기 FAQ
border-radius에서 px와 %의 차이는 무엇입니까?
픽셀 반지름은 절대값입니다 — 16px는 항상 16px입니다. 백분율 반지름은 요소의 치수에 상대적이므로 50%는 정사각형 상자에서 완벽한 원을 만들고 직사각형에서 타원을 만듭니다.
언제 타원형 모드를 사용해야 합니까?
한 축에서 더 볼록한 모서리를 원할 때 타원형 모드를 사용하세요 — 수평 알약, 잎 모양 또는 유기적 blob. CSS는 이를 border-radius 단축형에서 X-radii / Y-radii로 표현합니다.
비정사각형 상자에서 백분율 반지름이 잘못 보이는 이유는 무엇입니까?
수평 백분율은 요소의 너비에 상대적입니다. 수직 백분율은 높이에 상대적입니다. 넓고 짧은 요소에서 모서리는 원형 호가 아니라 타원으로 확장됩니다.
출력이 모든 브라우저에서 작동합니까?
네 — border-radius를 포함한 타원형 구문은 모든 최신 브라우저에서 지원됩니다: Safari, Firefox, Edge 및 Chrome의 모든 에버그린 버전. 벤더 접두사가 필요하지 않습니다.
border-radius를 사용하여 완벽한 원을 만드는 방법은 무엇입니까?
정사각형 요소에서 백분율 모드의 모든 모서리를 50%로 설정하세요. 요소도 동일한 너비와 높이가 필요합니다 — 크기가 동적인 경우 aspect-ratio: 1 / 1을 사용하세요.