clip-path의 한계를 넘는다 — CSS border-shape
비정형 도형에 테두리를 두르는 일은 오랫동안 프런트엔드의 골칫거리였다. clip-path나 mask로 요소를 자르면 콘텐츠뿐 아니라 테두리·그림자 같은 장식까지 함께 잘려 나갔기 때문이다. CSS-Tricks가 7월 7일 소개한 새 속성 border-shape는 이 문제를 정면으로 겨냥한다. 요소를 '잘라내는' 대신 '형태를 잡아', 테두리와 장식이 그 형태를 따라 흐르도록 만든다. 현재는 Chrome 계열에만 실렸지만, 지금이 그 잠재력을 미리 익혀 둘 때다.
"요소를 클립하는 대신, 이 속성은 요소의 '형태를 잡아' 장식이 그 형태를 따라가게 한다."CSS-Tricks (Temani Afif)
무슨 일인가
border-shape는 clip-path와 똑같은 값 — circle()·polygon()·inset()과 새 shape() 함수 — 을 그대로 받는다. 저자의 말처럼 "clip-path를 안다면 새로 배울 게 사실상 없고, 속성 이름만 바꾸면 된다." 값을 하나만 주면 그 경로를 따라 테두리가 그려지는 '스트로크 모드', 두 개를 주면 두 경로 사이 영역이 채워지는 '필 모드'로 동작한다. 이 덕분에 채움 없는 윤곽선 도형, 원에서 오려낸 컷아웃, 요소 밖으로 삐져나오는 풀블리드 장식, 부분 밑줄 같은 표현을 border·box-shadow·outline이 형태를 따라간 채로 얻을 수 있다. 애니메이션도 지원해 리빌·모핑 효과까지 선언형으로 가능하다.
여러 시각
같은 'CSS로 형태 잡기'라도 무엇을 형태화하느냐에 따라 짝이 되는 도구가 다르다.
- MDN: corner-shape —
border-shape가 요소 전체의 윤곽을 다시 그린다면,corner-shape는border-radius가 만든 '모서리'만 바꾼다.bevel(직선)·scoop(오목)·스퀴클 같은 값으로 모서리 곡률을 조절하되, 테두리·그림자·배경은 똑같이 그 모양을 따라간다. 둘은 대체재가 아니라 '요소 전체 vs 모서리'라는 층위가 다른 짝이다. - CSS-Tricks(Daniel Schwarz): 접힌 모서리 —
corner-shape: bevel과 가상요소를 조합해 종이가 접힌 듯한 3D 모서리를 만드는 실전 예시다. 다만 저자도 "크롬 밖에선 둥근 모서리로 폴백된다"고 못 박아, 표현력과 호환성의 맞바꿈이 지금 단계의 전제임을 보여준다.
왜 중요한가
핵심은 '장식과 형태의 분리'다. 그동안은 비정형 도형에 테두리를 두르려면 SVG를 겹치거나, 여러 겹의 그라디언트·마스크를 쌓는 우회로가 필요했다. border-shape와 corner-shape가 성숙하면 그 보일러플레이트가 속성 한 줄로 접힌다 — 마크업은 가벼워지고, 접근성 트리도 도형 트릭에 오염되지 않는다. 다만 지금은 Chromium 단독 지원이라, 이들을 프로덕션 기본값으로 삼는 순간 다른 엔진 사용자는 의도치 않은 화면을 보게 된다. '무엇이 표준으로 오고 있는가'를 미리 읽어 두는 것이 나중의 마이그레이션 비용을 가른다.
실무 적용
clip-path를 이미 쓰고 있다면 값을 그대로border-shape로 옮겨, 잘려 나가던 테두리·그림자를 형태에 되살릴 수 있는지부터 실험한다.- Chromium 단독 지원을 전제로
@supports (border-shape: circle())가드를 깔고, 미지원 환경엔 사각형·둥근 모서리로 안전하게 폴백되도록 프로그레시브 인핸스먼트를 설계한다. - QA 시 Firefox·Safari에서의 폴백 형태, 고대비·다크 모드에서의 테두리 대비,
prefers-reduced-motion에서의 도형 애니메이션 억제를 재현 시나리오에 포함한다.
Kenny의 관점
프런트엔드에서 새 CSS 속성의 진짜 가치는 '화려함'이 아니라 '제거되는 우회로'에 있다. 비정형 카드나 배지에 테두리 하나 두르려고 SVG를 겹치고 마스크를 쌓던 관행이 선언형 한 줄로 접히면, 마크업도 유지보수도 함께 가벼워진다. 다만 나는 Chromium 단독 단계의 속성을 기본값으로 태우지 않는다 — 폴백을 먼저 깔고 인핸스먼트로 얹는다. 좋은 AX는 최신 문법을 가장 빨리 쓰는 게 아니라, 지원이 무르익는 곡선 위에서 위험을 관리하며 올라타는 판단에서 나온다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗