이렇게 사용하세요
모서리마다 있는 슬라이더를 움직이면 위의 도형이 바로 바뀌어요. 네 모서리를 같은 값으로 맞추고 싶으면 "네 모서리 함께"를 켜세요. 슬라이더 옆 숫자 칸에는 슬라이더 범위보다 큰 값도 직접 넣을 수 있어요. 블롭이나 달걀처럼 한쪽으로 찌그러진 모양은 "고급"을 켜고 세로 반지름을 따로 조절하면 만들 수 있고, 프리셋에서 예시를 먼저 눌러 보면 감이 빨리 와요.
border-radius 문법
값을 네 개 적으면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 시계 방향이에요. 값이 같으면 줄여 쓸 수 있어서, 하나만 적으면 네 모서리 모두, 두 개면 "왼쪽 위·오른쪽 아래"와 "오른쪽 위·왼쪽 아래" 짝이에요. 이 도구는 가장 짧은 형태로 줄여서 출력해요.
슬래시(/)를 넣으면 앞쪽 값은 가로 반지름, 뒤쪽 값은 세로 반지름이 돼요. 예를 들어 50% / 60% 60% 40% 40%는 위쪽이 더 길쭉한 달걀 모양이에요. %는 요소 크기 기준이라 가로 %는 너비, 세로 %는 높이에 비례해요. 단위를 바꾸면 미리 보기 크기 200px을 기준으로 값을 환산해요.
자주 묻는 질문
알약 모양은 왜 999px인가요?
반지름이 요소 높이의 절반보다 크면 브라우저가 알아서 줄여서 양 끝이 완전한 반원이 돼요. 그래서 넉넉하게 큰 값을 넣는 게 흔한 방법이에요. 50%를 쓰면 가로로 긴 요소에서 타원이 돼요.
Tailwind 클래스는 어느 버전에서 되나요?
대괄호 임의 값 문법은 Tailwind v3와 v4에서 모두 동작해요. 클래스 안에 공백을 쓸 수 없어서 공백을 밑줄(_)로 바꿔 드려요.
안쪽 이미지가 모서리 밖으로 삐져나와요.
부모 요소에 overflow: hidden을 함께 주면 둥근 모서리 밖으로 나온 부분이 잘려요.