- "전체 일괄 조절" 슬라이더로 네 모서리를 한 번에 둥글게 만들 수 있습니다.
- 모서리마다 다른 곡률이 필요하면 TL·TR·BR·BL 슬라이더를 개별로 조절합니다.
- 위쪽 미리보기에서 모양이 실시간으로 바뀌는 것을 확인합니다.
- 원하는 모양이 되면 "CSS 복사"로 border-radius 코드를 가져가 스타일에 붙여넣습니다.
border-radius에 값을 여러 개 적으면 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래 순서, 즉 시계 방향으로 모서리에 차례로 적용됩니다. 값을 한 개만 쓰면 네 모서리에 모두 같은 곡률이 들어갑니다.
- 값 1개: 네 모서리가 똑같이 둥글어집니다. 이 도구는 네 값이 모두 같을 때 자동으로 한 개로 줄여 짧게 출력합니다.
- 값 4개: 모서리마다 다른 곡률을 줄 때 시계 방향으로 나열됩니다. 한쪽만 0으로 두면 말풍선·탭 같은 비대칭 모양이 됩니다.
- 가로/세로 분리: 슬래시(/)로 가로·세로 반지름을 따로 줄 수도 있어, 같은 모서리에서도 타원형으로 휘어진 곡선을 만들 수 있습니다.
중첩된 곡률을 맞추는 공식과 권장 곡률값은 둥근 모서리 디자인 가이드에 정리했습니다.
- 완전한 원·알약 모양: 정사각형 요소에서 전체 값을 충분히 크게(예: 999px) 주면 완벽한 원이 됩니다. 가로로 긴 버튼에 같은 값을 주면 양끝이 둥근 알약(pill) 모양이 되어 태그·칩 디자인에 좋습니다.
- 한쪽만 둥근 말풍선: 세 모서리만 둥글리고 한 모서리를 0으로 두면 채팅 말풍선 느낌이 납니다. 발신·수신 메시지에서 둥글지 않은 모서리 위치를 좌우로 바꾸면 방향이 다른 말풍선을 만들 수 있습니다.
- 탭·카드 상단만 둥글게: 위쪽 두 모서리(TL·TR)만 둥글리면 탭 버튼이나 카드 헤더처럼 아래가 붙는 요소를 자연스럽게 표현할 수 있습니다. 모달 상단, 바텀시트에도 자주 쓰입니다.
border-radius는 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래(시계 방향) 순서로 적용됩니다. 이 도구도 같은 순서로 코드를 생성하므로, 네 값이 모두 같으면 하나의 값으로 짧게 출력합니다.
px는 고정 곡률, %는 요소 크기에 비례하는 곡률입니다. 50%를 주면 요소 크기에 따라 타원·원이 됩니다. 이 도구는 직관적인 px 단위를 사용하며, 원이 필요하면 큰 px 값으로도 같은 효과를 낼 수 있습니다.
복사한 값은 CSS의 border-radius 속성입니다. 원하는 요소 스타일에 붙여넣으면 바로 적용됩니다. 모든 모서리 값이 동일하면 한 줄, 다르면 네 값이 순서대로 출력됩니다.
바깥 상자와 안쪽 요소의 둥글기가 따로 놀면 모서리가 어긋나 보입니다. 안쪽 곡률을 바깥 곡률에서 둘 사이 여백(padding)만큼 뺀 값으로 잡으면 두 곡선이 같은 중심을 공유해 자연스럽게 겹칩니다. 예를 들어 바깥이 16px이고 여백이 8px이면 안쪽은 8px로 두는 식입니다.
border-radius로 완전한 원이 되려면 요소가 정사각형이어야 하고 값이 가로·세로의 절반 이상이어야 합니다. 직사각형 요소에 큰 값을 주면 양 끝만 둥근 알약 모양이 됩니다. 정사각형으로 만든 뒤 넉넉히 큰 값(예: 999px)을 주면 어떤 크기에서도 원이 유지됩니다.