본문으로 건너뛰기

CSS Border Radius 생성기

CSS border-radius를 시각적으로 만들고 코드를 복사할 수 있는 무료 온라인 도구입니다.

Preview

모드

둥글기

px

CSS 코드

border-radius: 20px;

프리셋

주요 기능​

  • 2가지 모드: 전체 모드, 개별 모서리 모드
  • 실시간 미리보기: 변경 사항 즉시 확인
  • 세밀한 조절: 0-200px 범위 설정
  • 9가지 프리셋: 자주 사용하는 둥글기 스타일
  • 원클릭 복사: CSS 코드 즉시 복사

Border Radius란?​

border-radius는 요소의 모서리를 둥글게 만드는 CSS 속성입니다.

기본 문법​

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

/* 각 모서리 개별 지정 */
border-radius: 10px 20px 30px 40px;
/* 순서: 좌상단, 우상단, 우하단, 좌하단 */

사용 모드​

1. 전체 모드​

모든 모서리에 동일한 둥글기를 적용합니다.

border-radius: 20px;

사용 예시:

  • 버튼
  • 카드
  • 입력창
  • 이미지

2. 개별 모드​

각 모서리를 개별적으로 조절합니다.

border-radius: 30px 60px 30px 60px;

사용 예시:

  • 비대칭 디자인
  • 유니크한 모양
  • 브랜드 아이덴티티

프리셋 스타일​

Square (사각형)​

border-radius: 0px;

날카로운 모서리, 클래식한 디자인

Slightly Rounded (약간 둥근)​

border-radius: 4px;

미세한 둥글기, 세련된 느낌

Rounded (둥근)​

border-radius: 8px;

적당한 둥글기, 가장 범용적

Very Rounded (매우 둥근)​

border-radius: 16px;

부드러운 느낌, 친근한 디자인

Pill (알약 모양)​

border-radius: 50px;

버튼, 태그에 적합

Circle (원)​

border-radius: 9999px; /* 또는 50% */

프로필 이미지, 아이콘

Top Only (상단만)​

border-radius: 12px 12px 0 0;

모달 헤더, 카드 상단

Bottom Only (하단만)​

border-radius: 0 0 12px 12px;

모달 푸터, 드롭다운

Blob (블롭)​

border-radius: 30px 60px 30px 60px;

유기적인 형태, 독특한 디자인

실용 예제​

1. 버튼​

.button {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Pill 스타일 버튼 */
.button-pill {
  border-radius: 50px;
}

2. 카드​

.card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

3. 프로필 이미지​

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* 둥근 사각형 */
.avatar-rounded {
  border-radius: 12px;
}

4. 입력창​

.input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

5. 뱃지/태그​

.badge {
  display: inline-block;
  padding: 4px 12px;
  background: #e74c3c;
  color: white;
  font-size: 12px;
  border-radius: 50px;
}

6. 모달​

.modal {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  overflow: hidden;
}

.modal-header {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px 16px 0 0;
}

.modal-body {
  padding: 20px;
}

7. 이미지 갤러리​

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}

.gallery-item:hover {
  transform: scale(1.05);
}

.gallery-item img {
  width: 100%;
  display: block;
}

8. 진행 바​

.progress-container {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 50px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 50px;
  transition: width 0.3s;
}

고급 기법​

1. 타원형 모서리​

/* 수평 반지름 / 수직 반지름 */
border-radius: 50px / 25px;

/* 각 모서리 개별 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

2. 비대칭 디자인​

.unique-card {
  border-radius: 50px 10px 50px 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

3. 애니메이션​

.morphing-box {
  border-radius: 20px;
  transition: border-radius 0.5s ease;
}

.morphing-box:hover {
  border-radius: 50%;
}

4. 클리핑 효과​

.clipped-card {
  border-radius: 20px;
  overflow: hidden; /* 중요! */
}

.clipped-card img {
  width: 100%;
  display: block;
}

브라우저 호환성​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ 모든 모바일 브라우저

구형 브라우저 지원​

.box {
  -webkit-border-radius: 10px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -moz-border-radius: 10px; /* Firefox 1-3.6 */
  border-radius: 10px; /* 표준 */
}

성능 최적화​

1. GPU 가속​

.element {
  border-radius: 10px;
  transform: translateZ(0); /* GPU 가속 활성화 */
}

2. will-change 사용​

.animated-element {
  border-radius: 10px;
  will-change: border-radius;
  transition: border-radius 0.3s;
}

.animated-element:hover {
  border-radius: 50%;
}

3. 과도한 사용 피하기​

/* 나쁨: 모든 요소에 적용 */
* {
  border-radius: 5px;
}

/* 좋음: 필요한 요소에만 */
.button, .card, .input {
  border-radius: 8px;
}

디자인 팁​

1. 일관성 유지​

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

.button {
  border-radius: var(--radius-md);
}

.card {
  border-radius: var(--radius-lg);
}

2. 크기에 비례​

/* 작은 요소 - 작은 radius */
.small-button {
  padding: 6px 12px;
  border-radius: 4px;
}

/* 큰 요소 - 큰 radius */
.large-button {
  padding: 16px 32px;
  border-radius: 12px;
}

3. 콘텐츠와 조화​

/* 텍스트가 많은 카드 */
.text-card {
  border-radius: 8px; /* 적당한 둥글기 */
}

/* 이미지 중심 카드 */
.image-card {
  border-radius: 16px; /* 부드러운 둥글기 */
}

4. 브랜드 아이덴티티​

/* 친근한 브랜드 */
.friendly-brand {
  border-radius: 16px;
}

/* 전문적인 브랜드 */
.professional-brand {
  border-radius: 4px;
}

/* 미니멀 브랜드 */
.minimal-brand {
  border-radius: 0px;
}

일반적인 실수​

1. overflow 설정 잊기​

/* 문제: 이미지가 모서리 밖으로 나옴 */
.card {
  border-radius: 12px;
}

/* 해결: overflow 추가 */
.card {
  border-radius: 12px;
  overflow: hidden;
}

2. 너무 큰 값​

/* 나쁨: 불필요하게 큰 값 */
.button {
  width: 100px;
  height: 40px;
  border-radius: 200px; /* 과도함 */
}

/* 좋음: 적절한 값 */
.button {
  width: 100px;
  height: 40px;
  border-radius: 20px; /* height의 절반 = pill 모양 */
}

3. 퍼센트 vs 픽셀​

/* 정사각형이 아닌 경우 */
.rectangle {
  width: 200px;
  height: 100px;
  border-radius: 50%; /* 타원형 */
}

/* 원하는 경우 픽셀 사용 */
.rectangle {
  width: 200px;
  height: 100px;
  border-radius: 50px; /* 양쪽이 둥근 사각형 */
}

접근성 고려사항​

1. 충분한 대비​

.button {
  background: #3498db;
  color: white;
  border-radius: 8px;
  /* 색상 대비 4.5:1 이상 유지 */
}

2. 포커스 표시​

.button {
  border-radius: 8px;
}

.button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

3. 터치 타겟 크기​

.touch-button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  /* 모바일에서 터치하기 적절한 크기 */
}

관련 도구​