`border-radius`를 넘어: CSS `corner-shape` 속성이 일상적인 UI에 가져올 변화

border-radius를 사용하지 않고, 둥근 모서리 이외의 형태를 얻기 위해 clip-path, SVG 마스크(SVG masks), 그리고 불안정한 편법(workarounds)들을 사용해 왔습니다. 새로운 corner-shape 속성은 마침내 이를 변화시켜, 베벨(beveled), 스쿠프(scooped), 스쿼클(squircle) 형태의 모서리를 구현할 수 있는 문을 열어줍니다.

제가 처음 웹사이트 구축을 시작했을 때, 둥근 모서리를 만들려면 각 모서리용 하나씩, 그리고 본체용 하나까지 총 다섯 개의 배경 이미지가 필요했습니다. 그리고 클라이언트가 다른 반지름(radius)을 요구하지 않기만을 기도해야 했죠. 그러다 border-radius 속성이 등장했고, 웹 전체가 집단적으로 안도의 한숨을 내쉬었습니다. 그것은 15년도 더 된 일이며, 솔직히 말해서 우리는 그 이후로 줄곧 같은 흐름을 타고 있습니다. 그때와 마찬가지로, 저는 이 기능이 다른 브라우저들로 천천히 확산되어 가는 점진적 향상(progressive enhancement)으로 간주되기를 바랍니다.

저도 다른 사람들처럼 border-radius를 좋아하지만, 사실 이 속성은 단 하나의 형태만을 제공합니다. 바로 둥근 형태(Round)죠. 그게 전부입니다. 베벨(beveled) 모서리를 원하시나요? clip-path를 써야 합니다. 티켓 가장자리 같은 스쿠프(scooped) 형태를 원하시나요? SVG 마스크(SVG mask)를 써야 합니다. 스쿼클(squircle) 앱 아이콘을 원하시나요? 아무도 애니메이션을 만들어 달라고 요청하지 않기를 바라며 정교하게 조정된 SVG를 사용해야 합니다. 우리는 수년간 border-radius의 한계를 우회하기 위해 해킹(hacking)을 해왔으며, 이러한 편법에는 실제적인 트레이드오프(trade-offs)가 따릅니다. 테두리(borders)가 clip-path를 따르지 않고, 그림자(shadows)가 잘려 나가며, 누군가 패딩(padding) 값을 바꾸는 순간 깨져버리는 취약한 코드를 만들게 됩니다.

자, 새로운 **corner-shape**가 이 모든 것을 바꿉니다.

corner-shape란 무엇인가?

corner-shape 속성은 border-radius의 동반자입니다. 이것은 border-radius를 대체하는 것이 아니라, border-radius가 만드는 곡선의 *형태(shape)*를 수정합니다. border-radius가 없다면 corner-shape는 아무런 역할도 하지 못합니다. 하지만 둘이 함께라면 강력한 쌍이 됩니다.

이 속성은 다음과 같은 값들을 허용합니다:

• round: 기본값으로, 일반적인 border-radius와 동일합니다.
• squircle: 슈퍼엘립스(superellipse)로, Apple 스타일의 매끄러운 라운드 스퀘어(rounded square) 형태입니다.
• bevel: 두 반지름 끝점 사이의 직선(잘린 모서리)입니다.
• scoop: 반전된 곡선으로, 오목한(concave) 모서리를 만듭니다.
• notch: 날카로운 안쪽 절단 형태입니다.
• square: 사실상 라운딩을 제거하여 border-radius를 무효화합니다.

또한 border-radius와 마찬가지로 각 모서리마다 서로 다른 값을 설정할 수 있습니다.

*corner-shape: bevel round scoop squircle;
/* top-left, top-right, bottom-right, bottom-left */

세밀한 제어를 위해 숫자 매개변수를 사용하는 superellipse() 함수를 사용할 수도 있습니다.

.element {
  border-radius: 25px;
  corner-shape: superellipse(0); /* 'bevel'과 동일 */
  ...
}

여기서 이런 의문이 생길 수 있습니다. 왜 이 속성을 border-shape라고 부르지 않는 걸까요? 우선, 그것은 곧 다루게 될 완전히 다른 개념입니다. 둘째로, 이 속성은 테두리 (border)뿐만 아니라 외곽선 (outline), 박스 그림자 (box shadow), 배경 (background) 등 그 이상의 영역에도 적용됩니다. 이는 clip-path 속성이 결코 할 수 없었던 일입니다.

여기서 점진적 향상 (Progressive Enhancement)이 중요한 이유

이 글을 쓰는 시점 (2026년 3월) 기준으로, corner-shape는 Chrome 139+ 및 기타 Chromium 기반 브라우저에서만 지원됩니다. 이는 상당한 수의 사용자층을 의미하지만, 분명 모든 사용자를 포함하는 것은 아닙니다. 이 속성이 어디에서나 사용될 때까지 무시하거나, 혹은 이 속성 없이는 제대로 작동하지 않는 데모를 만들고 싶은 유혹에 빠지기 쉽습니다.

저는 두 가지 접근 방식 모두 옳지 않다고 생각합니다. 제가 보기에 corner-shape는 Internet Explorer 6 시대의 border-radius처럼 점진적 향상 (Progressive Enhancement)을 위한 완벽한 후보입니다. 기본 단계 (baseline)에서는 border-radius, clip-path, radial-gradient 마스크와 같이 우리가 이미 알고 있는 기술들을 사용하여 의도적으로 보기 좋게 구현해야 합니다. 그런 다음, corner-shape를 지원하는 브라우저를 위해 경험을 업그레이드하는 것입니다. 때로는 단순히 더 기본적인 기본값을 제공하는 것만으로 충분할 수도 있고, 때로는 조금 더 많은 작업이 필요할 수도 있습니다.

이 글의 모든 데모는 이러한 점진적 향상 아이디어를 바탕으로 제작되었습니다. 데모의 구조는 다음과 같습니다:

@layer base, presentation, demo;

presentation 레이어는 검증된 기술을 사용하여 완성도 높게 다듬어진 UI를 포함합니다. demo 레이어는 모든 것을 @supports로 감쌉니다:

@layer demo {
@supports (corner-shape: bevel) {
/* 여기에 업그레이드된 스타일을 작성합니다 */
...

폴백 (fallback) 배너도, “브라우저가 이 기능을 지원하지 않습니다”라는 메시지도 필요 없습니다. 그저 '좋은 디자인'과 '더 나은 디자인'이라는 두 단계의 디자인만 존재할 뿐입니다. 몇 가지 예시를 보여주는 것이 좋을 것 같았습니다. 이미 몇 가지 사례가 나와 있지만, 기존 사례들에 더해 약간의 추가적인 영감을 더할 수 있기를 바랍니다.

## 데모 1: 리본 배지가 달린 제품 카드

모든 이커머스(e-commerce) 사이트에는 제품 카드의 모서리에 붙어 있는 작은 “신상품(New)” 또는 “세일(Sale)” 배지가 있습니다. 전통적으로 이러한 리본 모양을 구현하려면 `clip-path: polygon()`을 사용하거나, 회전된 가상 요소 (pseudo-element)를 사용해야 했습니다. 이를 “까다로운 코드 (fiddly code)”라고 부를 수 있는데, 누군가 패딩 (padding) 값을 바꾸는 순간 레이아웃이 깨질 위험이 있기 때문입니다.

하지만 중요한 점은, 기본 사양 (baseline)에서 반드시 리본 모양이 *필요한* 것은 아니라는 점입니다. 모서리가 약간 둥근 단순한 배지만으로도 동일한 정보를 전달할 수 있으며 충분히 보기 좋습니다:

```css
.product__badge {
border-radius: 0 4px 4px 0;
background-color: var(--badge-bg);
...

그게 전부입니다. 카드의 왼쪽 가장자리에 딱 붙어 있는 작고 깔끔한 라벨입니다. 화려하지도 않고, 깨지지도 않습니다. 모든 브라우저에서 작동합니다.

corner-shape를 지원하는 브라우저의 경우, 다음과 같이 강화합니다:

@layer demo {
/* 브라우저가 `corner-shape`를 지원하는 경우 */
@supports (corner-shape: bevel) {
...

round bevel bevel round 조합은 방향성이 있는 리본을 생성합니다. 카드의 가장자리와 만나는 부분은 둥글게 (round), 반대편은 깎인 형태 (bevel)로 뾰족하게 만듭니다. clip-path도, 가상 요소 트릭도 필요 없습니다. 테두리 (border), 그림자 (shadow), 배경 (background) 모두 선언된 모양을 그대로 따릅니다. 왜냐하면 그 모양 자체가 형태이기 때문입니다.

카드 자체는 border-radius: 12px에서 더 큰 사이즈와 squircle (스쿼클) 코너 모양으로 업그레이드됩니다. squircle은 표준적인 라운딩이 상대적으로 어색해 보일 정도로 매끄러운 초타원 (superellipse) 곡선을 만듭니다. 디자이너들은 이를 즉시 알아챌 것입니다. 그 외의 사람들은 그저 “더 고급스러운 느낌이 난다”라고 말할 것입니다.

꿀팁: squircle을 사용하는 것...

카드 컴포넌트(card components)에 적용된 값은 개별적으로 보면 전후 차이가 미묘할 수 있지만, 페이지 전체를 놓고 보면 혁신적인 변화를 가져오는 업그레이드 중 하나입니다. 이것은 바로 'iOS 효과'입니다. 모든 요소가 초타원(superellipse) 곡선을 사용하게 되면, 평범한 원형 호(circular arcs)는 오히려 어색해 보이기 시작합니다. 이번 데모에서는 제가 조금 과장하여 표현했습니다.

데모 2: 버튼, 태그, 그리고 컴포넌트

이것은 corner-shape가 단순히 히어로 섹션(hero sections)만을 위한 것이 아님을 보여주는 '컴포넌트 라이브러리 데모'입니다. 이는 실용적이고 일상적인 UI, 즉 일반 버튼, 아웃라인 버튼(outlined buttons), 상태 태그(status tags), 방향 화살표, 알림 배지(notification badges) 등에 적용됩니다.

설정은 의도적으로 깔끔하게 구성했습니다. 세련된 타이포그래피(typeface)와 함께 표준 border-radius: 10px를 적용한 버튼들입니다. 모든 것이 제대로 작동하며 전문적으로 보입니다. 망설임 없이 이대로 구현할 수도 있을 것입니다.

여기에 corner-shape 레이어를 더하면 하나의 쇼케이스로 변모합니다. 각 버튼 유형은 가능한 범위가 얼마나 넓은지 보여주기 위해 각기 다른 모양을 갖게 됩니다.

@layer demo {
@supports (corner-shape: bevel) {
.btn--primary {
...

기본 버튼(primary button)은 베벨(beveled) 처리되어 다면체 보석 같은 느낌으로 시작하여, 호버(hover) 시 squircle로 부드럽게 변합니다. corner-shape 값은 그에 상응하는 superellipse() 값을 통해 애니메이션화되기 때문에 전환이 매우 매끄럽습니다. 예전에는 구현하기 어려웠지만 이제는 단 하나의 속성(물론 border-radius와 함께 사용됩니다)만으로 가능한 즐거운 상호작용입니다.

보조 버튼(secondary button)은 표준 원형과 스쿼클(squircle)의 중간 값인 superellipse(0.5)를 사용하며, 더 큰 border-radius와 결합하여 독특한 알약 모양(pill-like shape)을 만듭니다. 위험 버튼(danger button)은 넉넉한 반경을 가진 더욱 두드러진 squircle을 적용합니다. 그리고 notch와 scoop은 각각 날카롭거나 오목한 고유의 개성을 부여합니다.

버튼을 넘어, 상태 태그에는 corner-shape: notch를 적용하여 기계로 찍어낸 듯한 느낌을 주는 날카로운 안쪽 절단면을 구현했습니다. 방향 화살표 태그는 round bevel bevel round(그리고 뒤로 가기 화살표를 위한 역순)를 사용하여, 과거에 clip-path: polygon()을 사용해야 했던 부분을 대체합니다. 이제 모든 상태에서 테두리(borders)와 그림자(shadows)가 올바르게 작동합니다.

데모 3: 추천사 카드 (Testimonial Cards)

이 데모는 아마 제가 가장 좋아하는 데모일 것입니다. 기본적으로 이 카드들은 세리프 타이포그래피 (serif typography), 모래색 팔레트 (sandy palette), 그리고 강조된 카드에 적용된 스쿠프 형태의 모서리 (scooped corners)를 가진 추천사 카드일 뿐입니다. 디자인 언어는 깔끔한 기하학적 버튼 데모와 의도적으로 다르게 설정되었으며, 그것이 바로 핵심입니다. corner-shape는 단지 그 추가적인 "엣지"를 더해줄 뿐입니다.

기본은 표준 border-radius: 16px 카드입니다. 강조된 추천사 카드는 은은한 그라데이션 (gradient)과 장식적인 열린 따옴표 기호와 함께 전체 너비를 차지합니다. 일반 카드들은 2열 그리드 (two-column grid)에서 교차로 배치됩니다. 이것만으로도 이미 프리미엄 마케팅 사이트에서 볼 법한 모습입니다.

corner-shape 레이어는 개성을 더합니다:

@layer demo {
/* 점진적 향상 (Progressive enhancement) */
@supports (corner-shape: scoop) {
...

강조된 카드는 4면 모두 오목한(concave) 형태의 완전한 scoop 모서리를 가져, 세리프 타이포그래피와 어울리는 유기적이고 마치 수공예로 만든 듯한 느낌을 줍니다. 짝수 번호의 카드들은 scoop round를 혼합하여, 추가적인 마크업 (markup) 없이도 각 카드에 약간씩 다른 개성을 부여합니다.

작성자 아바타는 원형에서 squircle (스쿼클)로 바뀝니다. 조금 더 "특별하게" 만들어주는 작은 디테일입니다.

꿀팁: corner-shape: scoop은 세리프 글꼴 및 따뜻한 색상 팔레트와 아름답게 어우러집니다. 오목한 곡선은 에디토리얼 디자인 (editorial design), 캘리그래피 (calligraphy), 그리고 인쇄 레이아웃에서 발견되는 유기적인 형태를 반영합니다. 기하학적인 산세리프 (sans-serif) 디자인의 경우, squircle이나 bevel (베벨)을 사용하는 것이 좋습니다.

데모 4: 가격표 카드 (Pricing Cards)

모든 SaaS 사이트에는 가격 페이지가 필요하며, 시각적 계층 구조 (visual hierarchy)의 과제는 항상 동일합니다. 즉, 다른 플랜들이 소외감을 느끼지 않게 하면서 하나의 플랜을 돋보이게 만드는 것입니다. 이 데모는 corner-shape를 통해 이 문제를 해결합니다.

이 데모는 지난 데모와 매우 유사한데, corner-shape를 아직 지원하지 않는 브라우저를 위한 훌륭한 베이스라인 (baseline)을 다시 한번 제공한다는 점입니다. 세 개의 카드가 가로로 배치되어 있으며, 강조된 플랜은 따뜻한 그라데이션 배경, 더 강한 테두리 (border), 그리고 "가장 인기 있음 (Most Popular)" 배지로 구분됩니다.

향상된 기능은 이를 한 단계 더 발전시킵니다:

@layer demo {
@supports (corner-shape: squircle) {
.plan {
...

일반 플랜은 프리미엄 느낌을 주기 위해 squircle (스쿼클)을 적용받습니다.

추천 플랜(featured plan)은 scoop (스쿱)을 적용받아, 주변 요소들과 즉시 차별화되는 오목한 모서리(concave corners)를 가집니다. “가장 인기 있음 (Most Popular)” 배지는 중앙에 배치되며 corner-shape: bevel (베벨)을 적용받아, 카드에 핀으로 고정된 보석처럼 느껴지는 다면체 형태의 보석 같은 모양을 만듭니다. CTA 버튼은 카드의 언어와 일치하도록 squircle을 적용받습니다.

이 데모에서 제가 마음에 드는 점은 형태의 계층 구조(shape hierarchy)가 콘텐츠의 계층 구조(content hierarchy)를 반영한다는 것입니다. 가장 중요한 요소(추천 플랜)는 가장 독특한 형태(scoop)를 가집니다. 배지는 가장 날카로운 형태(bevel)를 가집니다. 그 외의 모든 것은 더 단순한 업그레이드(squircle)를 받습니다. 형태가 단순한 장식을 넘어 시각적 강조를 위한 도구가 됩니다.

데모 5: 뮤직 플레이어 (Music Player)

마지막 데모는 앨범 아트, 재생 컨트롤, 장르 태그, 그리고 재생 대기열(listening queue)이 포함된 뮤직 플레이어를 위한 따뜻한 다크 UI (dark UI)입니다. 시각적으로 가장 복잡한 데모이며, 하나의 응집력 있는 디자인 내에서 다양한 요소 유형에 걸쳐 corner-shape가 어떻게 작동하는지를 보여줍니다.

이번에는 oklch(18% 0.015 40)를 기반으로 한 따뜻한 다크 팔레트(dark warm palette)와 전반적인 표준 라운드 코너(rounded corners)를 채택했습니다. 앨범 아트는 border-radius: 12px, 대기열 항목은 border-radius: 12px, 장르 태그는 border-radius: 5px를 가집니다. 보기 좋고 완성도 높으며 세련된 플레이어의 모습입니다.

그리고 다시 한번, 몇 가지 향상된 기능을 추가합니다:

@layer demo {
@supports (corner-shape: squircle) {
.now-playing {
...

플레이어 카드와 앨범 아트에는 앱 아이콘과 앨범 썸네일에 사용되는 것과 동일한 곡선인 squircle이 적용됩니다. 앨범 아트 스와치(swatches)는 border-radius: 22%에서 적절한 squircle 형태인 26%로 변경되는데, 이는 음악을 듣는 동안 계속 응시하게 되는 시각적 요소에서 미묘하지만 의미 있는 차이를 만들어냅니다.

대기열 항목은 scoop round를 적용받아 왼쪽 상단과 왼쪽 하단은 오목한 모서리(concave corners)가 되고, 오른쪽은 둥근 형태가 됩니다. 이는 레이아웃을 압도하지 않으면서 각 행에 독특한 느낌을 부여합니다. 장르 태그는 bevel을 적용받습니다.

그 날카로운 느낌을 위해.

재생(Play) 버튼 또한 앨범 커버와 어울리도록 기존의 border-radius: 50%에 corner-shape: squircle이 적용됩니다. 겉보기에는 차이가 거의 느껴지지 않을 수도 있지만, 이는 플레이어의 전반적인 분위기에 기여합니다.

브라우저 지원 (Browser Support)

이 글을 쓰는 시점을 기준으로, corner-shape는 Chrome 139 이상 및 Chromium 기반 브라우저에서 사용할 수 있습니다. Firefox와 Safari는 아직 이를 지원하지 않습니다. 해당 명세(spec)는 CSS Borders and Box Decorations Module Level 4에 포함되어 있으며, 현재 W3C 작업 초안(Working Draft) 상태입니다.

실제 사용 측면에서 보면 이는 괜찮습니다. 이것이 바로 이러한 데모들이 구축되는 방식의 핵심입니다. presentation 레이어는 모든 브라우저에 세련되고 완성된 UI를 전달합니다. demo