CSS로 도형을 만들 때마다 느끼는 답답함, 다들 공감하시죠? 특히 테두리(border)를 넣으려고 하면 난감해집니다. clip-path로 도형을 만들면 테두리가 잘려나가고, mask를 쓰면 그림자도 함께 사라지니까요. 이 문제를 해결하기 위해 CSS에 새로운 속성이 등장했습니다. 바로 border-shape입니다. 아직 Chrome에서만 지원하지만, 곧 모든 브라우저에서 사용할 날이 올 테니 미리 알아두면 좋습니다. 이 글에서는 border-shape의 기본 개념부터 실전 활용법까지 하나하나 살펴보겠습니다.
border-shape의 기본 사용법
border-shape는 clip-path와 비슷한 문법을 사용하지만, 요소를 잘라내는 대신 모양을 바꿔서 border나 box-shadow가 그 모양을 따라가게 해줍니다.
.shape {
border: 8px solid red;
border-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 마름모 */
}
이렇게 하면 마름모 모양의 테두리가 생깁니다. 기존에는 clip-path로 만든 도형에 border를 입히려면 온갖 꼼수를 부려야 했지만, 이제는 정말 간단해졌습니다.
두 개의 shape 값 사용하기
border-shape는 하나 또는 두 개의 shape 값을 받을 수 있습니다. 두 개를 사용하면 첫 번째 shape가 바깥 경계, 두 번째 shape가 안쪽 경계가 되어 그 사이 영역에 border가 채워집니다. 이렇게 하면 컷아웃(cutout) 효과를 만들 수 있습니다.
.cutout {
border: 8px solid pink;
border-shape: inset(0) circle(50px); /* 사각형 안에 원형 컷아웃 */
}
이 코드를 실행하면 사각형 테두리 안쪽에 원 모양의 빈 공간이 생기고, 그 경계를 따라 테두리가 그려집니다. inset(0) 대신 circle()을 쓰면 원형 컷아웃도 만들 수 있어요.
주의사항 및 한계
- 브라우저 지원: 이 글을 쓰는 시점 기준으로
border-shape는 Chrome에서만 동작합니다. Firefox나 Safari에서는 아직 지원되지 않으므로, 프로덕션에 적용하기 전에 반드시 브라우저 호환성을 확인하세요. - border-radius 무시:
border-shape를 사용하면border-radius는 무시됩니다. 둥근 모서리가 필요하다면circle()이나 다른 shape 함수로 직접 만들어야 합니다. - 콘텐츠 오버플로:
border-shape는 요소의 테두리와 배경을 변형하지만, 내부 콘텐츠는 원래 사각형 영역을 유지합니다. 콘텐츠가 테두리 밖으로 넘칠 수 있으므로overflow속성을 활용해 조절해야 합니다.
실전 팁: 브레이크아웃 효과 만들기
border-shape를 사용하면 화면 전체로 배경이 확장되는 브레이크아웃 효과를 쉽게 만들 수 있습니다.
.breakout {
border-shape: inset(0 -100vw) circle(0);
border-color: pink;
}
이 코드는 요소의 배경이 좌우로 화면 끝까지 확장되는 효과를 만듭니다. 기존에는 margin이나 width를 조작하는 번거로운 방법을 써야 했지만, 이제는 간단한 한 줄로 해결됩니다.
결론
border-shape는 CSS 도형 작업의 판도를 바꿀 잠재력을 가진 속성입니다. 테두리 있는 도형, 컷아웃, 브레이크아웃 효과, 애니메이션까지 가능해지면서 기존에 어렵거나 불가능했던 디자인을 쉽게 구현할 수 있습니다. 아직 브라우저 지원이 제한적이지만, 미리 익혀두면 표준화가 되었을 때 바로 활용할 수 있을 거예요.
다음 단계로는 shape() 함수를 깊이 있게 공부해보는 것을 추천합니다. border-shape와 함께 사용하면 무궁무진한 가능성이 열립니다. 또한 고객을 진짜로 이해하는 4단계 UX 리서치에서 배운 것처럼, 새로운 기술을 도입할 때는 사용자 관점에서의 가치를 먼저 고민하는 습관이 중요합니다.
함께 보면 좋은 글: