Border Radius 생성기

Border Radius 생성기란?

모서리 둥글기(border-radius)를 모서리별로 조절하고 CSS를 만들어 주는 도구예요.

사용 방법

1. 네 모서리 값을 조절합니다.
2. 미리보기를 확인합니다.
3. CSS를 복사합니다.

사용 팁

• 원을 만들려면 정사각형에 50%를 주세요.

자주 묻는 질문

px와 % 중 어떤 단위를 써야 하나요?

px는 상자 크기와 관계없이 같은 둥글기를 주고, %는 상자 크기에 비례해요. 정사각형에 50%를 주면 원이 되고, 알약 모양은 px로 큰 값(예: 999px)을 주는 방법을 많이 써요. 단위를 바꾸면 미리보기 크기를 기준으로 값을 바꿔서 모양을 최대한 유지해요.

물방울이나 블롭처럼 비대칭 모양은 어떻게 만드나요?

'가로·세로 따로'를 켜고 '모서리 개별 조절'로 바꾸면 모서리마다 가로와 세로 반지름을 따로 정할 수 있어요. 프리셋에 잎사귀·물방울·블롭이 있고, '랜덤 블롭'을 누르면 매끈한 블롭 모양을 무작위로 만들어 줘요.

Tailwind 클래스도 나오나요? 값이 상자보다 크면 어떻게 되나요?

CSS 선언 아래에 Tailwind 값이 함께 나와요. 8px는 rounded-lg처럼 기본 클래스로, 그 밖의 값은 rounded-[...] 형태로 나와요. px 값이 상자 크기의 절반보다 크면 브라우저가 비율을 맞춰 줄여서 그려요.