Border Radius 생성기
코너 핸들을 드래그해 8개의 독립 반경으로 유기적 blob을 조각하고, CSS 또는 Tailwind 코드를 복사하세요.
Border Radius 생성기 사용법
- 미리보기 박스의 4개 코너 핸들을 직접 드래그해 시각적으로 모양을 만드세요.
- 슬라이더로 미세 조정: 각 코너는 독립적인 수평·수직 반경을 갖습니다.
- 프리셋을 사용해 보세요. blob, 잎, 달걀, 티켓 도형이 원클릭으로 완성됩니다.
- 데모 박스와 배경색을 실제 디자인에 맞추면 정확한 미리보기가 됩니다.
- CSS 탭에서 border-radius 선언을 복사하거나 Tailwind 클래스를 가져오세요.
이 Border Radius 생성기에 대해
대부분은 border-radius를 단일 값으로 알고 있지만, 이 속성은 실제로 최대 8개의 값을 받습니다: 슬래시로 구분된 4개의 수평 반경과 4개의 수직 반경입니다(예: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). 이 슬래시 구문이 모던 웹 디자인 어디에나 있는 유기적 「blob」 도형의 비결입니다.
이 생성기는 8개의 값 모두를 슬라이더와 드래그 가능한 코너 핸들로 제공하여 구문을 외우지 않고도 원하는 모양을 조각할 수 있습니다. 모든 코너의 수평·수직 반경이 같으면 출력이 자동으로 표준 1~4값 표기로 단순화됩니다. 생성된 코드는 모든 최신 브라우저에서 동작하며, Tailwind 탭은 임의값 rounded-[...] 클래스를 생성합니다.
Border Radius 자주 묻는 질문
border-radius의 슬래시(/) 구문이란?
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%에서 슬래시 앞은 4개 코너(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래)의 수평 반경이고 뒤는 수직 반경입니다. 수평과 수직 반경이 다르면 타원형 코너가 되며, 이것이 유기적 blob 도형의 기초입니다.
완전한 원은 어떻게 만드나요?
모든 코너를 50%로 설정하세요(또는 원 프리셋 클릭). 정사각형 요소에서 border-radius: 50%는 완전한 원을, 직사각형에서는 타원을 만듭니다. 백분율은 요소 자체의 너비와 높이에 상대적입니다.
border-radius에 백분율과 픽셀 중 무엇을 써야 하나요?
백분율은 요소에 따라 스케일되어 반응형 도형이 되므로 blob에 이상적입니다. 픽셀은 고정된 코너 크기를 제공해 크기와 관계없이 일관된 라운딩이 필요한 버튼·카드 같은 UI 컴포넌트에 적합합니다. 이 생성기는 백분율을 사용해 어떤 크기에서도 모양의 비율을 유지합니다.
넓은 요소에서 blob이 찌그러져 보이는 이유는?
백분율 반경은 요소의 치수에 상대적입니다. 너비 400px 박스의 수평 50%는 200px이지만, 높이 200px의 수직 50%는 100px입니다. 이는 예상된 동작으로 도형이 박스에 적응하는 것입니다. 실제 요소와 같은 종횡비로 미리보기 하세요.
8값 구문이 모든 브라우저에서 되나요?
네. 타원 코너의 슬래시 구문은 CSS Backgrounds and Borders 명세의 일부로 모든 최신 브라우저(Chrome, Edge, Firefox, Safari)에서 프리픽스 없이 지원됩니다.