CSS border-radius 생성기

사용 방법

1. 원, 알약형, 나뭇잎, 물방울 같은 프리셋을 고르거나 값을 직접 조절합니다.
2. "네 모서리를 같은 값으로"를 끄면 왼쪽 위·오른쪽 위·오른쪽 아래·왼쪽 아래를 따로 지정할 수 있습니다.
3. 단위를 px·%·rem 중에서 고릅니다. px와 rem을 바꿀 때는 16px = 1rem으로 환산합니다.
4. "타원 모서리"를 켜면 모서리마다 가로와 세로 반지름을 따로 지정할 수 있습니다.
5. 배경과 상자 모양을 바꿔 가며 확인한 뒤 CSS나 Tailwind CSS 클래스를 복사합니다.

주의 사항

• 입력할 수 있는 값은 px 0~9999, % 0~100, rem 0~625입니다. 음수는 0으로, 상한을 넘는 값은 상한으로 맞춥니다. 소수는 넷째 자리까지입니다.
• %는 요소의 너비와 높이에 대한 비율이라 같은 값이라도 요소 크기와 비율에 따라 모양이 달라집니다. %로 바꾸거나 %에서 바꿀 때는 숫자를 환산하지 않고 그대로 씁니다.
• Tailwind CSS는 주로 임의 값 문법 rounded-[...]로 출력합니다. v3.0 이상과 v4에서 쓸 수 있고 v2 이하에서는 쓸 수 없습니다.
• 한 값 안에서 단위를 섞어 쓸 수는 없습니다(예: 10px 50%).
• 입력한 값은 저장하지 않습니다. 페이지를 닫으면 사라집니다.

계산·변환 방식

CSS 축약 규칙에 따라 가능한 한 짧게 씁니다. 네 모서리가 같으면 1개, 왼쪽 위와 오른쪽 아래·오른쪽 위와 왼쪽 아래가 같으면 2개, 오른쪽 위와 왼쪽 아래만 같으면 3개, 그 밖에는 4개 값으로 씁니다.

타원 모서리는 "가로 반지름 / 세로 반지름" 슬래시 문법으로 씁니다. 세로 값이 모두 가로 값과 같으면 슬래시 뒤를 생략합니다. 0도 단위를 붙여 0px로 씁니다.

Tailwind CSS의 이름 붙은 클래스(rounded-sm 등)는 v3와 v4에서 크기가 달라 쓰지 않습니다. 예외로 모두 0이면 rounded-none, 모두 9999px이면 rounded-full을 출력합니다.