CSS 도형에 테두리? 이제 border-shape 하나로 끝납니다

도형에 테두리 붙이기, 왜 이렇게 어려웠을까?

CSS로 도형을 만드는 건 이제 익숙하죠. clip-path나 mask를 쓰면 별 모양, 물방울 모양, 물결 모양까지 다 만들 수 있어요. 그런데 여기서 문제가 하나 생깁니다. **"이 도형에 테두리를 넣고 싶다"**는 순간부터 모든 게 꼬이기 시작하거든요.

clip-path는 요소 전체를 잘라내기 때문에 테두리든 그림자든 다 같이 잘려나갑니다. 그래서 지금까지는 filter: drop-shadow()로 흉내내거나, SVG를 쓰거나, ::before/::after로 우회하는 삽질이 필수였어요.

그런데 최근 CSS에 **border-shape**라는 새 프로퍼티가 등장했습니다. 이름 그대로 "테두리 모양"을 잡아주는 프로퍼티인데, 이게 생각보다 판을 크게 바꿀 물건이에요. 함께 등장한 shape() 함수와 corner-shape 프로퍼티까지 묶어서 정리해볼게요.

참고로 border-shape는 현재 Chromium 계열(Chrome, Edge)에서만 동작합니다. 실무 적용은 아직 이르지만, 지금 감을 잡아두면 표준화 이후 바로 써먹을 수 있어요.

근거자료: CSS-Tricks - Get Ready for the Powerful CSS border-shape Property

핵심: clip-path를 border-shape로 바꾸기만 하면 됩니다

기본 사용법

border-shape는 clip-path와 동일한 값 문법을 사용합니다. polygon(), circle(), inset(), 그리고 새로 추가된 shape()까지 그대로 쓸 수 있어요. 즉, 기존 코드에서 프로퍼티 이름만 바꾸면 됩니다.

.shape {
  /* 기존 코드 */
  /* clip-path: polygon(50% 0, 100% 100%, 0 100%); */

  /* 새 코드 */
  border-shape: polygon(50% 0, 100% 100%, 0 100%);
  border: 8px solid #ff4d6d;
}

이렇게 하면 border가 도형의 윤곽선을 따라 그려집니다. clip-path에서는 불가능했던 일이에요.

두 개의 shape 값 = 컷아웃 모드

border-shape의 진짜 재미는 두 개의 shape 값을 받을 수 있다는 점입니다. 첫 번째가 바깥 경계, 두 번째가 안쪽 경계가 되고, 그 사이 영역이 테두리로 채워집니다.

.box {
  /* 바깥은 사각형, 안쪽은 원 → 원형 컷아웃 효과 */
  border-shape: inset(0) circle(50px);
  border: 8px solid pink;
}

inset(0) 대신 circle()을 넣으면 원 안에 도형이 들어간 모양도 만들 수 있어요. border-radius: 50%와 비슷해 보이지만, border-shape가 활성화된 요소에서는 border-radius는 무시됩니다. 어차피 모서리가 없으니까요.

브레이크아웃 배경 트릭

바깥 shape를 화면 밖까지 늘리고 안쪽을 0으로 만들면, 배경이 화면 끝까지 뻗어나가는 효과를 만들 수 있습니다.

.box {
  border-shape: inset(0 -100vw) circle(0);
  border: 40px solid pink;
}

border가 사실상 배경처럼 동작하는 셈이에요. 기존에는 ::before로 화면 밖까지 밀어내는 편법을 써야 했는데, 이제는 한 줄로 끝납니다.

애니메이션도 됩니다

border-shape는 애니메이션 가능합니다. 두 가지 방식이 있어요.

1. border-width 애니메이션 — 리빌(reveal) 효과를 만들 수 있습니다.
2. shape 값 자체 애니메이션 — 두 도형 사이를 자연스럽게 보간(interpolate)합니다.

.blob {
  border-shape: shape(from 50% 0, curve to 100% 50%, ...);
  transition: border-shape 0.4s ease;
}

.blob:hover {
  border-shape: shape(from 50% 10%, curve to 90% 50%, ...);
}

복잡한 블롭(blob) 도형도 clip-path 대신 border-shape로 바꾸기만 하면 테두리·그림자까지 다 살아있는 상태로 애니메이션할 수 있습니다.

shape() 함수 문법이 익숙하지 않다면, SVG path 문법과 거의 동일하니 SVG 도형을 그대로 옮겨온다고 생각하면 편해요.

실무에서 쓸 때 주의할 점

1. 브라우저 지원이 아직 좁습니다

현재(작성 시점) Chromium 기반 브라우저에서만 동작합니다. Firefox, Safari는 아직입니다. 실서비스에 넣으려면 반드시 @supports로 감싸세요.

@supports (border-shape: inset(0)) {
  .shape {
    border-shape: polygon(...);
    border: 4px solid red;
  }
}

2. 콘텐츠는 도형 밖으로 삐져나옵니다

border-shape는 요소의 장식(테두리, 그림자, 아웃라인)만 도형을 따라갑니다. 내부 텍스트나 이미지 콘텐츠는 여전히 원래 사각형 박스를 기준으로 배치돼요. 즉, 도형 밖으로 콘텐츠가 튀어나올 수 있습니다.

• 콘텐츠를 자르고 싶다면 overflow: hidden을 함께 지정
• 콘텐츠를 위에 띄우고 싶다면 그대로 두면 됨 (오히려 이게 브레이크아웃 효과의 원리)

3. border-radius는 무시됩니다

border-shape가 적용된 요소에서는 border-radius가 동작하지 않아요. 모서리 자체가 없으니까 논리적으로 당연한데, 기존 코드를 마이그레이션할 때 헷갈릴 수 있으니 주의하세요.

4. 한국 SI/에이전시 환경에서의 적용 맥락

국내 SI 프로젝트는 아직도 IE/구형 브라우저 호환성을 요구하는 경우가 많고, 디자인 시안이 Figma로 나와도 "테두리 있는 도형"은 대부분 SVG나 이미지로 처리하는 관행이 있습니다. border-shape는 그 관행을 CSS 레벨에서 대체할 수 있는 카드지만, 당장은 프로토타입·사내 툴·관리자 페이지 같은 브라우저 통제가 가능한 환경에서 먼저 써보는 걸 추천합니다. 외부 공개 서비스는 @supports 폴백을 전제로 접근하세요.

5. 성능 관련

복잡한 shape() 값에 애니메이션을 걸면 리페인트 비용이 커질 수 있습니다. 특히 여러 요소에 동시에 걸 때는 will-change: border-shape를 남발하지 말고, 실제 프로파일링 후 적용하세요.

정리: 지금 배워두면 2년 뒤에 편합니다

border-shape는 한마디로 **"clip-path의 테두리 문제를 해결한 진화형 프로퍼티"**입니다.

• clip-path처럼 도형을 만들되, border / box-shadow / outline이 도형을 따라감
• 두 개의 shape 값을 주면 컷아웃·프레임 효과까지 가능
• border-width 또는 shape 값 자체를 애니메이션할 수 있음
• 단, 현재는 Chrome 계열만 지원 → @supports 필수

당장 실서비스에 쓰긴 이르지만, 지금 shape() 문법에 익숙해져 두면 표준화가 진행됐을 때 바로 실무에 투입할 수 있습니다. 특히 로더, 장식용 프레임, 히어로 섹션의 브레이크아웃 배경 같은 요소에서 진가를 발휘해요.

다음 단계 학습 방향

1. shape() 함수 문법 먼저 익히기 (SVG path 문법과 거의 동일)
2. corner-shape 프로퍼티와 조합해서 모서리 커스터마이징
3. @supports 폴백 전략 설계 (SVG → CSS 점진적 향상)
4. 애니메이션 성능 프로파일링

함께 보면 좋은 글

• TorchTPU, 구글이 PyTorch를 TPU에서 네이티브로 돌리기 위해 만든 비밀 병기
• CSS 상대 색상(Relative Color)으로 애니메이션 테마링 끝내기 OKLCH 실전 가이드