CSS border-radius 가이드: 둥근 모서리부터 블롭까지

단축 구문

단축 구문은 padding이나 margin과 같은 시계 방향 순서를 따르며, 왼쪽 위에서 시작합니다:

border-radius: 16px;                /* 네 모서리 모두 */
border-radius: 16px 8px;            /* 왼쪽위+오른쪽아래, 오른쪽위+왼쪽아래 */
border-radius: 16px 8px 4px;        /* 왼쪽위, 오른쪽위+왼쪽아래, 오른쪽아래 */
border-radius: 16px 8px 4px 2px;    /* 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래 */

8개 값(타원형) 구문

사실 각 모서리는 값을 두 개 받습니다. 가로 반지름과 세로 반지름을 슬래시로 구분합니다. 이렇게 하면 원형이 아니라 타원형 모서리가 됩니다:

/* 형식: 가로 반지름들 / 세로 반지름들 */
border-radius: 50px 20px 30px 40px / 10px 20px 30px 40px;

/* 단축: 모든 모서리에 동일 적용 */
border-radius: 50% / 25%;

/* 모서리별 완전 제어 */
border-top-left-radius:     30px 60px;
border-top-right-radius:    60px 30px;
border-bottom-right-radius: 30px 60px;
border-bottom-left-radius:  60px 30px;

각 모서리 쌍의 첫 값은 가로 반지름(옆면에서 얼마나 안쪽에서 곡선이 시작하는지)이고, 두 번째 값은 세로 반지름(위에서 얼마나 아래에서 곡선이 시작하는지)입니다. 두 값이 같으면 원호가 되고, 다르면 늘어난 타원호가 됩니다.

자주 쓰는 모양

원

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

알약 버튼

.pill {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px; /* 항상 높이의 절반보다 큰 값 */
}

알약 모양에는 9999px 같은 아주 큰 픽셀 값을 쓰세요. 브라우저가 요소 높이의 절반으로 잘라 주기 때문에, 크기가 어떻든 양 끝이 완벽한 반원이 됩니다.

나뭇잎 / 물방울

.leaf {
  width: 120px;
  height: 120px;
  border-radius: 0 100% 0 100%;
}

.teardrop {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

블롭 (비대칭 곡선 도형)

.blob {
  width: 200px;
  height: 200px;
  background: #7c5cfc;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

유기적인 블롭은 8개 값 구문이 가장 빛나는 지점입니다. 모서리마다 다른 가로/세로 반지름을 주면 불규칙해 보이지만 수학적으로는 정확한 도형이 나옵니다. 장식용 배경에 잘 맞습니다.

스쿼클 (애플 스타일 둥근 사각형)

/* 근사치 — 진짜 스쿼클은 SVG나 마스크가 필요합니다 */
.squircle {
  width: 120px;
  height: 120px;
  border-radius: 30%;
}

참고로 border-radius가 만드는 것은 타원이지 스쿼클이 아닙니다. 스쿼클은 곡률이 연속적으로 이어지는 수학적 도형입니다. 애플이 쓰는 진짜 스쿼클은 SVG나 CSS mask-image에 커스텀 도형이 필요합니다. 다만 일반적인 UI에서는 20~30% 반지름과 눈으로 구별하기 어렵습니다.

픽셀과 백분율

단위	동작	쓰임새
px	요소 크기와 무관하게 반지름 고정	크기가 제각각인 요소에 일관된 모서리 (예: 카드)
%	요소 크기에 비례	도형과 함께 커지는 원, 타원, 블롭
rem	루트 글꼴 크기에 비례	사용자 확대에 따라 커지는 반지름
em	요소의 글꼴 크기에 비례	버튼 글자 크기에 맞춰 커지는 반지름

넘침(overflow) 처리

기본적으로 모서리가 둥근 요소는 자식 요소를 잘라내지 않습니다. 둥근 카드 안의 이미지는 다음을 추가하지 않으면 여전히 각진 모서리로 남습니다:

.card {
  border-radius: 16px;
  overflow: hidden;  /* 자식을 둥근 모양에 맞춰 잘라냄 */
}

다만 overflow: hidden은 컨테이너 밖으로 뻗는 box-shadow 발광 같은 효과도 함께 잘라냅니다. 둘 다 필요하다면 border-radius를 자식 이미지에 직접 주세요.

비대칭 디자인을 위한 모서리별 제어

/* 탭 모양 (위쪽 모서리만 둥글게) */
.tab {
  border-radius: 12px 12px 0 0;
}

/* 알림 배너 (왼쪽 모서리는 각지게) */
.banner {
  border-radius: 0 12px 12px 0;
}

/* 말풍선 꼬리 쪽 모서리 */
.bubble-left {
  border-radius: 16px 16px 16px 0;
}

/* 한쪽만 캡슐 모양 */
.half-pill {
  border-radius: 9999px 0 0 9999px;
}

자주 묻는 질문

border-radius를 크게 줘도 왜 원이 더 커지지 않나요?: 반지름이 짧은 쪽 변의 절반을 넘어가면 브라우저가 값을 잘라냅니다. 40×40 요소에 50px 반지름을 주면 20px(40의 절반)을 준 것과 똑같이 동작합니다. 크기에 따라 함께 변하는 도형에는 백분율을 쓰고, 확실하게 "완전히 둥글게" 하려면 9999px를 쓰세요.
border-radius가 성능에 영향을 주나요?: 거의 없습니다. 최신 브라우저는 둥근 모서리를 각진 모서리만큼 빠르게 렌더링합니다. 문제가 되는 경우는 스크롤되는 큰 요소에 overflow: hidden과 함께 쓸 때뿐입니다. 화면 밖 렌더링을 강제할 수 있습니다. 일반적인 UI 요소에서는 측정 가능한 비용이 없습니다.
border-radius를 부드럽게 애니메이션하려면요?: transition: border-radius 0.3s ease;를 쓰면 브라우저가 반지름을 부드럽게 보간합니다. 원에서 스쿼클처럼 아주 다른 모양으로 변형할 때는 will-change: border-radius를 더해 렌더러에 미리 알려 주세요.
border-radius로 삼각형이나 별을 만들 수 있나요?: 안 됩니다. border-radius는 사각형의 모서리를 둥글게 할 뿐입니다. 삼각형은 border 트릭이나 clip-path를 쓰세요. 별을 비롯한 다각형은 clip-path나 SVG를 씁니다.
border-radius와 -webkit-border-radius는 무엇이 다른가요?: -webkit- 접두사는 2013년 이전의 오래된 사파리와 크롬에 필요했습니다. 지금은 접두사 없는 버전이 어디서나 동작합니다. 아주 오래된 브라우저를 지원해야 하는 경우가 아니라면 접두사는 빼세요.