border-radius를 얼마로 설정해야 자연스럽게 보이나요?

요소의 크기에 비례한 값이 가장 자연스럽습니다. 작은 요소(버튼, 태그)는 4–8px, 카드는 8–16px, 대형 모달은 16–24px이 일반적입니다. 요소 높이의 10–15% 수준을 기준으로 삼는 것이 좋습니다.

iOS와 안드로이드의 기본 둥근 모서리 값은?

iOS는 큰 요소(카드, 시트)에 12–16pt, 버튼에 10pt 수준을 사용합니다. Material Design 3는 기본 컴포넌트에 4–28dp 범위의 shape token을 사용합니다.

🔲CSS border-radius 계산기

Q: pill 버튼은 어떻게 만드나요?

border-radius: 9999px 또는 9999rem을 사용하면 높이의 절반이 자동 적용되어 완전한 pill 형태가 됩니다. 높이의 절반 값을 직접 계산할 필요가 없습니다.

요소 크기별 자연스러운 border-radius 값 계산

가로 (px)

세로 (px)

자연스러운 border-radius 값을 정하는 방법

border-radius는 요소의 크기에 비례한 값이 가장 자연스럽습니다. 작은 버튼(32px 높이)에 20px border-radius를 쓰면 pill에 가까워져 의도치 않게 과도해 보입니다. 반대로 큰 카드(300px 높이)에 4px만 쓰면 모서리가 거의 안 보입니다.

일반적인 기준은 요소의 짧은 변 길이의 5–20%입니다. 5% 수준은 약간 둥글게, 10%는 보통, 20%는 크게 둥근 느낌입니다. 결과를 4px 또는 8px 단위로 반올림하면 디자인 그리드와 잘 맞아 개발 시 깔끔합니다.

pill과 circle 형태

border-radius: 9999px를 사용하면 브라우저가 자동으로 높이의 절반 값을 적용해 완전한 pill 형태를 만듭니다. 직접 계산할 필요 없이 큰 수를 사용하는 것이 실무 관례입니다. 정사각형 요소에 50%를 쓰면 완전한 원이 됩니다.

자주 묻는 질문

border-radius를 얼마로 설정해야 자연스럽나요?

요소의 짧은 변의 5–20% 수준이 자연스럽습니다. 작은 버튼은 4–8px, 카드는 8–16px, 모달은 16–24px이 일반적입니다.

pill 버튼은 어떻게 만드나요?

border-radius: 9999px를 사용하면 완전한 pill 형태가 됩니다. 높이의 절반을 직접 계산할 필요가 없습니다.

iOS와 Android의 기본 둥근 모서리 값은?

iOS는 카드에 12–16pt, 버튼에 10pt를 사용합니다. Material Design 3는 컴포넌트별 shape token(4–28dp)을 사용합니다.

미리보기

자연스러운 border-radius 값을 정하는 방법

pill과 circle 형태

자주 묻는 질문

같은 카테고리 도구