CSS Border Radius 생성기

border-radius는 UI에서 가장 자주 사용되는 속성 중 하나입니다. 단순한 둥근 모서리부터 유기적인 모양까지 다양하게 활용할 수 있습니다.

border-radius 구문

/* 모든 모서리 동일 */
border-radius: 8px;

/* 각 모서리 개별 설정 (시계 방향: 좌상, 우상, 우하, 좌하) */
border-radius: 8px 16px 8px 16px;

/* 타원형 모서리 */
border-radius: 50% / 30%;

디자인 트렌드

• 스퀄클: border-radius: 30% — iOS 앱 아이콘 스타일
• 뉴모피즘: 큰 border-radius + 섀도우
• 구성주의: 0 border-radius (날카로운 모서리)
• 버블: border-radius: 50% (완전한 원)

UX에서의 border-radius

• 기본 버튼: 4~8px (전문적)
• 알약 버튼: 9999px (현대적)
• 카드: 8~16px (부드러움)
• 모달: 12~24px (우호적)