사용법
- "전체 일괄 조절" 슬라이더로 네 모서리를 한 번에 둥글게 만들 수 있습니다.
- 모서리마다 다른 곡률이 필요하면 TL·TR·BR·BL 슬라이더를 개별로 조절합니다.
- 위쪽 미리보기에서 모양이 실시간으로 바뀌는 것을 확인합니다.
- 원하는 모양이 되면 "CSS 복사"로 border-radius 코드를 가져가 스타일에 붙여넣습니다.
활용 팁
- 완전한 원·알약 모양: 정사각형 요소에서 전체 값을 충분히 크게(예: 999px) 주면 완벽한 원이 됩니다. 가로로 긴 버튼에 같은 값을 주면 양끝이 둥근 알약(pill) 모양이 되어 태그·칩 디자인에 좋습니다.
- 한쪽만 둥근 말풍선: 세 모서리만 둥글리고 한 모서리를 0으로 두면 채팅 말풍선 느낌이 납니다. 발신·수신 메시지에서 둥글지 않은 모서리 위치를 좌우로 바꾸면 방향이 다른 말풍선을 만들 수 있습니다.
- 탭·카드 상단만 둥글게: 위쪽 두 모서리(TL·TR)만 둥글리면 탭 버튼이나 카드 헤더처럼 아래가 붙는 요소를 자연스럽게 표현할 수 있습니다. 모달 상단, 바텀시트에도 자주 쓰입니다.
자주 묻는 질문
Q. 값의 순서는 어떻게 되나요?
border-radius는 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래(시계 방향) 순서로 적용됩니다. 이 도구도 같은 순서로 코드를 생성하므로, 네 값이 모두 같으면 하나의 값으로 짧게 출력합니다.
Q. px 대신 %를 쓰면 어떻게 다른가요?
px는 고정 곡률, %는 요소 크기에 비례하는 곡률입니다. 50%를 주면 요소 크기에 따라 타원·원이 됩니다. 이 도구는 직관적인 px 단위를 사용하며, 원이 필요하면 큰 px 값으로도 같은 효과를 낼 수 있습니다.
Q. 생성된 코드는 어디에 쓰나요?
복사한 값은 CSS의 border-radius 속성입니다. 원하는 요소 스타일에 붙여넣으면 바로 적용됩니다. 모든 모서리 값이 동일하면 한 줄, 다르면 네 값이 순서대로 출력됩니다.