RADCSS 테두리 둥글기 생성기

CSS border-radius 완벽 가이드

CSS border-radius는 요소의 모서리를 둥글게 만드는 속성으로, 카드, 버튼, 아바타, 뱃지 등 현대적인 UI 디자인의 핵심입니다. 단 한 줄의 CSS로 딱딱한 사각형을 부드럽고 친근한 형태로 바꿀 수 있습니다. 이 도구는 슬라이더를 조작하는 즉시 결과를 미리보기로 확인하면서 원하는 값을 복사할 수 있게 해줍니다.

border-radius 문법 이해하기

단일 값 — 4개 모서리 동시 적용

가장 기본적인 사용법으로, 하나의 값이 모든 모서리에 동일하게 적용됩니다.

.card {
  border-radius: 16px; /* 모든 모서리 동일 */
}

.avatar {
  border-radius: 50%; /* 완전한 원 */
}

두 값 — 대각선 쌍

두 값을 사용하면 첫 번째는 top-left + bottom-right, 두 번째는 top-right + bottom-left에 적용됩니다.

.badge {
  border-radius: 20px 4px; /* 대각선 쌍으로 적용 */
}

네 값 — 각 모서리 개별 설정

시계 방향으로 top-left → top-right → bottom-right → bottom-left 순서로 적용됩니다.

.blob {
  border-radius: 30px 70px 50px 10px;
  /* TL=30, TR=70, BR=50, BL=10 */
}

/* 개별 속성으로도 가능 */
.custom {
  border-top-left-radius: 10px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 40px;
}

실전 예시 — 카드, 버튼, 아바타

카드 컴포넌트

.card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  padding: 24px;
  background: white;
}

/* 상단만 둥근 이미지 카드 */
.card-image {
  border-radius: 12px 12px 0 0;
}

버튼 스타일링

/* 기본 버튼 */
.btn { border-radius: 6px; }

/* Pill 버튼 (완전 둥근) */
.btn-pill { border-radius: 9999px; }

/* 아이콘 버튼 (정원) */
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

아바타와 뱃지

/* 원형 아바타 */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

/* 사각형 아바타 (약간 둥글게) */
.avatar-square {
  border-radius: 8px;
}

브라우저 호환성 및 주의사항

호환성

border-radius는 IE9 이상 모든 브라우저에서 지원됩니다. 과거에는 -webkit-border-radius, -moz-border-radius 접두사가 필요했지만, 현재는 표준 속성만으로 충분합니다.

overflow: hidden과 함께 사용하기

자식 요소가 둥근 모서리를 벗어나는 경우 부모에 overflow: hidden을 추가하세요. 이미지가 있는 카드에서 자주 필요합니다.

.card {
  border-radius: 12px;
  overflow: hidden; /* 자식이 모서리를 벗어나지 않도록 */
}

자주 묻는 질문 (FAQ)

border-radius: 50%와 border-radius: 9999px의 차이는?

50%는 요소 크기에 상대적이라 정사각형에서만 완전한 원이 됩니다. 직사각형에 50%를 쓰면 타원이 됩니다. 9999px처럼 큰 px 값은 pill 모양(좌우 반원)을 만드는 데 사용합니다.

슬래시(/) 문법은 무엇인가요?

border-radius: 50px / 20px처럼 슬래시를 사용하면 수평 반지름과 수직 반지름을 따로 설정해 타원형 모서리를 만들 수 있습니다.

border-radius가 성능에 영향을 주나요?

border-radius 자체는 성능 부담이 거의 없습니다. 단, border-radius와 box-shadow를 동시에 많이 사용할 때 GPU 레이어 생성 비용이 발생할 수 있으니 과도한 사용은 피하세요.

CSS 변수와 함께 사용할 수 있나요?

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

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

Tailwind CSS에서 border-radius 사용하기

Tailwind에서는 rounded, rounded-md, rounded-lg, rounded-full 등의 유틸리티 클래스를 사용합니다. rounded-full이 border-radius: 9999px에 해당합니다.