CSS border-image 애니메이션, 이거 하나면 테두리 디자인 끝납니다

왜 굳이 border-image로 애니메이션을 만들까?

솔직히 말하면 테두리에 애니메이션 넣는 방법은 많아요. mask로 만들 수도 있고, conic-gradient를 background에 깔고 padding으로 속을 비우는 트릭도 있고, outline을 활용하는 방법도 있죠.

그런데 border-image가 갖는 압도적인 장점이 있어요. 네 방향 테두리에 동일한 디자인을 자동으로 복제해준다는 점입니다. 위/아래/좌/우를 각각 손볼 필요가 없어요. 게다가 border-image-slice로 이미지를 잘라서 타일링까지 할 수 있으니, 반복 패턴 애니메이션을 만들 때 코드량이 확 줄어듭니다.

물론 큰 단점도 있어요. border-image는 border-radius를 따라 곡선으로 휘지 않아요. 둥근 카드에 테두리를 감싸는 애니메이션을 만들려면 이 부분을 감안한 설계가 필요합니다. 이 글에서는 그 제약을 전제로, 각진 카드 컴포넌트 기준으로 깔끔하게 떨어지는 패턴을 보여드릴게요.

참고로 이 글은 근거자료의 border-image 애니메이션 아이디어를 실무 관점에서 재구성한 것입니다.

1단계: 기본 카드 레이아웃 잡기

먼저 애니메이션을 입힐 카드 하나를 만듭니다. HTML은 정말 단순해요.

<div class="card">
  <p>Bruce Wayne</p>
</div>

CSS는 카드의 크기와 배경 이미지를 잡아줍니다. aspect-ratio를 쓰면 반응형에서도 비율이 안 깨져요.

.card {
  width: 150px;
  aspect-ratio: 0.69;
  position: relative;
  background: center / 90% no-repeat;
  background-image: url("batman.jpg");
}

여기서 끝이 아니라, 텍스트가 배경 위에 그대로 겹치면 가독성이 떨어지니 살짝 위치를 잡아줍니다.

.card p {
  position: absolute;
  bottom: 8px;
  left: 8px;
  margin: 0;
  font-size: 12px;
  color: #fff;
}

2단계: border-image로 테두리 그리기

핵심은 border-image-source에 그라디언트를 넣는 거예요. 처음엔 완전히 투명한 상태로 두고, hover 시 색이 채워지도록 만들 겁니다.

.card {
  /* 위에서 만든 기본 스타일 유지 */

  /* 테두리로 쓸 그라디언트 */
  border-image-source: linear-gradient(-45deg, red 0%, transparent 0%);
  /* 그라디언트를 어떻게 잘라 쓸지 (1px 단위 슬라이스) */
  border-image-slice: 1;
  /* 테두리 두께 */
  border-image-width: 5px;
  /* 카드와 테두리 사이 간격 */
  border-image-outset: 5px;
}

border-image-slice: 1은 "그라디언트를 1px 단위로 잘라서 테두리 전체에 채워 넣어라"라는 의미입니다. border-image-outset: 5px은 테두리를 카드 바깥으로 5px 밀어내서 여백을 주는 역할이에요.

왜 커스텀 프로퍼티 등록이 필요한가

그라디언트의 시작/끝 지점(퍼센트)은 기본적으로 애니메이션이 안 됩니다. 브라우저가 "퍼센트 사이를 보간"하는 방법을 모르기 때문이에요. 그래서 @property로 우리가 직접 애니메이션 가능한 변수를 선언해줍니다.

@property --p {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

이제 그라디언트에 --p를 넣고, hover 시 100%로 늘려주면 테두리가 스스로 그려지는 효과가 완성됩니다.

.card {
  border-image-source: linear-gradient(-45deg, red var(--p), transparent 0%);
  border-image-slice: 1;
  border-image-width: 5px;
  border-image-outset: 5px;
  transition: --p 0.6s ease;
}

.card:hover {
  --p: 100%;
}

transition-property에 --p를 명시해주면 브라우저가 어떤 변수를 보간할지 정확히 알게 되어 성능에도 유리합니다.

3단계: conic-gradient로 응용하기

linear-gradient로도 충분히 예쁘지만, conic-gradient를 쓰면 완전히 다른 느낌의 "회전하는 테두리"를 만들 수 있어요. 이번엔 슬라이스 값(--n)과 각도(--a) 두 개를 애니메이션합니다.

@property --n {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card {
  border-image-source: conic-gradient(from var(--a), red var(--a), transparent 0%);
  border-image-width: 5px;
  border-image-slice: var(--n);
  border-image-repeat: round; /* 슬라이스를 타일링 */
  transition-property: --n, --a;
  transition-duration: 0.6s;
}

.card:hover {
  --n: 20;   /* 슬라이스 두께 증가 → 테두리에 결이 생김 */
  --a: 360deg; /* 그라디언트가 한 바퀴 회전 */
}

border-image-repeat: round는 슬라이스된 조각을 테두리 안에 정수 개수로 맞춰 타일링해줍니다. 딱 안 나눠지면 미세하게 늘리거나 줄여서 맞춰요. 이 옵션 덕분에 hover 시 테두리에 규칙적인 "결"이 생기는 게 눈에 보일 겁니다.

실무에서 주의할 점

• border-radius와 궁합이 나쁩니다. 둥근 모서리 카드에 이 기법을 그대로 쓰면 테두리가 각지게 잘려 보여요. 둥근 UI가 필요하면 mask 기반 접근을 별도로 검토해야 합니다.
• @property는 최신 브라우저 지원이 필요합니다. Chrome, Edge, Safari 16.4+, Firefox 128+ 정도는 되어야 안정적으로 동작해요. 구형 브라우저 폴백을 원한다면 hover 시 색상만 바뀌는 단순 버전을 기본으로 깔아두세요.
• transition-property에 커스텀 프로퍼티를 명시하세요. 안 하면 브라우저가 모든 속성을 감시하느라 성능이 떨어질 수 있습니다.
• prefers-reduced-motion 대응을 잊지 마세요. 접근성 측면에서 애니메이션을 끄는 미디어 쿼리를 꼭 추가하는 게 좋아요.

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

국내 환경에서의 적용 맥락

국내 SI/금융권 프로젝트에서는 구형 브라우저(특히 사내 IE 호환 모드) 지원 요구가 아직도 종종 나옵니다. @property가 안 먹는 환경에서는 애니메이션이 아예 안 보이니, "hover 시 테두리 색상만 바뀌는 정적 폴백" 을 기본값으로 두고, @supports (background: paint(something)) 같은 조건부로 화려한 버전을 얹는 전략이 안전합니다. 마케팅 랜딩 페이지처럼 브라우저 스펙을 통제할 수 있는 환경에서 먼저 시도해보시는 걸 추천해요.

정리하면

border-image 애니메이션의 핵심은 세 가지입니다.

1. border-image-source에 그라디언트를 넣고, border-image-slice로 잘라서 테두리에 채운다.
2. @property로 애니메이션 가능한 커스텀 변수를 선언한다.
3. hover 시 변수 값을 바꿔서 테두리가 스스로 그려지거나 회전하게 만든다.

border-radius 제약만 감안하면, 코드량 대비 시각적 임팩트가 정말 큰 기법이에요. 카드 UI, 프로필 위젯, 썸네일 hover 효과 등에 바로 응용해보세요.

다음 단계로 가볼 만한 것

• repeating-linear-gradient를 조합해서 "움직이는 사선 패턴 테두리" 만들기
• conic-gradient의 색상 스톱을 3개 이상으로 늘려서 무지개 회전 테두리 만들기
• border-image-repeat의 stretch / repeat / round / space 네 가지 값을 비교 실험해보기
• 애니메이션을 hover가 아니라 :focus-visible에도 걸어서 키보드 접근성까지 챙기기

함께 보면 좋은 글

• AWS 유럽 소버린 클라우드, 디지털 주권을 위한 교차 파티션 장애 조치 설계 가이드 — 인프라 아키텍처 관점에서 프론트엔드 성능 설계를 다시 보고 싶다면.
• 팬톤이 에이전트 AI로 색상 전문성을 확장한 방법 AI-Ready 데이터베이스의 핵심 역할 — 색상과 데이터를 다루는 관점이 흥미롭다면 함께 읽어보세요.