프리셋
미리보기
200px
150px
모서리 설정
CSS 코드
border-radius: 12px;
📐 Border Radius 생성기란?
Border Radius 생성기는 CSS border-radius 속성을 시각적으로 편집하는 도구입니다. 네 모서리를 개별적으로 또는 연결하여 동시에 조절할 수 있으며, px와 % 단위를 지원합니다. 알약, 드롭, 리프 등 프리셋으로 특수 모양을 빠르게 만들 수 있고, 실시간 미리보기로 결과를 즉시 확인합니다. 버튼, 카드, 아바타, 뱃지 등 다양한 UI 요소의 모서리 스타일링에 활용할 수 있습니다.
📋 border-radius 속성 이해
| 표기법 | 적용 순서 | 예시 |
|---|---|---|
| 1개 값 | 모든 모서리 동일 | border-radius: 12px; |
| 2개 값 | 좌상+우하 / 우상+좌하 | border-radius: 12px 0; |
| 3개 값 | 좌상 / 우상+좌하 / 우하 | border-radius: 12px 8px 0; |
| 4개 값 | 좌상 / 우상 / 우하 / 좌하 | border-radius: 12px 8px 4px 0; |
💡 모서리 디자인 팁
- 완전한 원: 정사각형 요소에 50% 적용 (또는 너비의 절반 px)
- 알약 모양: 높이의 절반 이상 적용 (예: 9999px)
- 일관성: 디자인 시스템에서 4px 배수 사용 (4, 8, 12, 16...)
- 접근성: 클릭 영역이 너무 작아지지 않도록 주의
- 반응형: 모바일에서는 더 작은 radius 권장
자주 묻는 질문
px와 % 단위의 차이는?▼
px는 절대값으로 요소 크기와 무관합니다. %는 요소 크기에 비례하여 계산됩니다. 50%를 적용하면 정사각형은 원이 되고, 직사각형은 타원이 됩니다.
모서리가 겹치면 어떻게 되나요?▼
인접한 모서리의 radius 합이 해당 변의 길이를 초과하면 브라우저가 자동으로 비율을 조정합니다. 의도치 않은 결과가 나올 수 있으니 주의하세요.
타원형 모서리는 어떻게 만드나요?▼
border-radius에 슬래시(/)를 사용하면 수평/수직 radius를 다르게 지정할 수 있습니다. 예: border-radius: 50% / 25%; 는 타원형 모서리를 만듭니다.