border-radius 생성기

중첩된 모서리는 안쪽이 더 작아야 합니다

둥근 카드 안에 둥근 버튼이나 이미지를 넣었을 때 어딘가 어색해 보이는 경우가 있습니다. 대개 안쪽과 바깥쪽에 같은 반경을 준 탓입니다.

두 곡선이 나란히 흐르려면 바깥 반경과 안쪽 반경의 차이가 그 사이 여백만큼이어야 합니다. 이 관계가 어긋나면 두 곡선의 간격이 모서리에서 벌어지거나 좁아져 어긋난 느낌이 듭니다.

• 여백이 바깥 반경보다 크면 안쪽은 0(각진 모서리)이 맞습니다. 음수 반경은 없습니다.
• 여백이 0이면 안쪽도 바깥과 같은 반경입니다. 이미지를 카드에 꽉 채울 때가 이 경우입니다.
• 이 규칙을 지키면 별것 아닌 것 같은데 확실히 정돈돼 보입니다. 잘 만든 디자인 시스템은 대부분 이걸 지킵니다.

/* 안쪽 반경 = 바깥 반경 - 여백 */
.card {
  border-radius: 16px;
  padding: 8px;
}
.card > img {
  border-radius: 8px;   /* 16 - 8 = 8 */
}

/* CSS 변수로 관계를 고정해 두면 실수가 없다 */
.card {
  --r: 16px;
  --pad: 8px;
  border-radius: var(--r);
  padding: var(--pad);
}
.card > img {
  border-radius: calc(var(--r) - var(--pad));
}

알약 모양은 999px로 만드세요

양끝이 완전한 반원인 알약(pill) 모양을 만들 때 50%를 쓰면 안 됩니다. %는 요소의 가로·세로에 대한 비율이라, 가로가 긴 버튼에 50%를 주면 양끝이 반원이 아니라 길쭉한 타원으로 늘어납니다.

해법은 어이없을 만큼 단순합니다. 높이의 절반보다 확실히 큰 값을 px로 주면 됩니다. 브라우저는 반경이 요소 크기를 넘으면 자동으로 줄여서 딱 반원이 되게 처리합니다. 그래서 999px 같은 큰 값을 주면 버튼 높이가 얼마든 항상 정확한 알약이 됩니다.

슬래시(/) 문법 — 여덟 개 값의 정체

border-radius는 값을 여덟 개까지 받습니다. 슬래시 앞의 네 값은 각 모서리의 가로 반지름, 뒤의 네 값은 세로 반지름입니다. 앞뒤를 다르게 주면 모서리가 원이 아니라 타원으로 깎입니다.

순서는 시계 방향으로 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래입니다. CSS의 다른 네 값 속성(margin 등)이 위 → 오른쪽 → 아래 → 왼쪽인 것과 시작점이 다르니 헷갈리기 쉽습니다.

/* 네 값이 같으면 하나로 줄여 쓴다 */
border-radius: 16px;

/* 모서리별로 다르게 (시계 방향: 왼위 오른위 오른아래 왼아래) */
border-radius: 18px 18px 18px 2px;   /* 왼쪽 아래만 각지게 = 말풍선 꼬리 */

/* 슬래시 — 앞 4개는 가로, 뒤 4개는 세로 반지름 */
border-radius: 60% 40% 30% 70% / 30% 60% 70% 40%;

blob은 어디에 쓰는가

물방울처럼 흐물흐물한 유기적 도형(blob)은 2020년 전후로 랜딩 페이지에서 크게 유행했고 지금도 흔합니다. SVG나 이미지 없이 CSS 한 줄로 만들 수 있다는 게 매력입니다.

다만 blob을 콘텐츠 컨테이너로 쓰면 안 됩니다. 모서리가 크게 깎이면서 안쪽 글자가 잘리거나 여백이 이상해집니다. 실무에서 blob은 거의 항상 배경 장식입니다.

• 히어로 섹션 배경의 색 얼룩 — 그라디언트를 채우고 blur를 크게 줘서 뒤에 깔면 요즘 SaaS 랜딩 느낌이 납니다.
• 프로필 사진 마스크 — 정사각 사진에 blob 반경을 주면 부드러운 인상이 됩니다.
• 아이콘 뒤 배경 얼룩 — 아이콘 뒤에 옅은 색 blob을 깔면 밋밋함이 사라집니다.
• 섹션 구분 장식 — 큰 blob을 화면 밖으로 절반쯤 걸쳐 두는 방식.

/* 히어로 배경 장식 — 뒤에 깔고 흐리게 */
.blob {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 60% 40% 30% 70% / 30% 60% 70% 40%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  filter: blur(60px);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}

반경이 무시되거나 잘리는 경우

• overflow가 기본값인데 자식이 넘침 — 부모에 반경을 줘도 자식 이미지가 모서리를 뚫고 나옵니다. 부모에 overflow: hidden 을 함께 줘야 합니다.
• table 요소 — border-collapse: collapse 인 표에는 반경이 먹지 않습니다. separate 로 바꾸거나 감싸는 div에 주세요.
• 반경이 요소 크기보다 큼 — 브라우저가 자동으로 비율을 맞춰 줄입니다. 오류가 아니라 규격에 정의된 동작이며, 알약을 999px로 만드는 방법이 이 동작을 이용한 것입니다.
• input·button의 기본 스타일 — iOS 사파리는 기본 반경을 강제로 넣습니다. -webkit-appearance: none 을 줘야 내 값이 적용됩니다.
• 그림자와 함께 쓸 때 — box-shadow는 border-radius를 따라가므로 별도 처리가 필요 없습니다. 다만 가상 요소(::after)로 그림자를 만들 때는 border-radius: inherit 를 잊지 마세요.