Stitched Border: CSS Border Animation

Stitched Border

A denim patch that gets sewn up: stitches appear one at a time around the edge, hold, then unravel. An SVG mask draws on stepped timing, one step per stitch, so each stitch pops in whole.

Also known as: stitched border css, sewing border animation, denim stitch border.

Handmade

Color Base size 16px Dark background Hold hover state

HTML

<div class="bdr-stitched-border">
  <svg class="bdr-stitched-border-svg" aria-hidden="true">
    <defs>
      <mask id="bdr-stitched-border-mask"><rect class="bdr-stitched-border-needle" width="100%" height="100%" pathLength="100"/></mask>
    </defs>
    <rect class="bdr-stitched-border-thread" width="100%" height="100%" pathLength="100" mask="url(#bdr-stitched-border-mask)"/>
  </svg>
  Handmade
</div>

CSS

.bdr-stitched-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --thread: color-mix(in srgb, var(--c) 15%, #fde7c2);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, #fff 7%, transparent) 0 1px, transparent 1px 0.3em),
    color-mix(in srgb, var(--c) 70%, #0b1220);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, #000), inset 0 0 1.2em color-mix(in srgb, #000 30%, transparent);
  color: var(--thread);
  letter-spacing: 0.04em;
}
.bdr-stitched-border-svg {
  position: absolute;
  inset: 0.55em;
  width: calc(100% - 1.1em);
  height: calc(100% - 1.1em);
  overflow: visible;
  pointer-events: none;
}
.bdr-stitched-border-svg rect {
  rx: 0.5em;
  fill: none;
}
.bdr-stitched-border-thread {
  stroke: var(--thread);
  stroke-width: 0.15em;
  filter: drop-shadow(0 0.06em 0 color-mix(in srgb, #000 40%, transparent));
  stroke-linecap: round;
  stroke-dasharray: 1.4 1.1;
}
.bdr-stitched-border-needle {
  stroke: #fff;
  stroke-width: 1em;
  stroke-dasharray: 100 100;
  animation: bdr-stitched-border-sew 5s infinite;
}
/* 40 stitches: one step of 2.5 per stitch. */
@keyframes bdr-stitched-border-sew {
  0%       { stroke-dashoffset: 100; animation-timing-function: steps(40, end); }
  60%, 85% { stroke-dashoffset: 0; animation-timing-function: steps(40, end); }
  100%     { stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
  .bdr-stitched-border, .bdr-stitched-border *, .bdr-stitched-border::before, .bdr-stitched-border::after, .bdr-stitched-border *::before, .bdr-stitched-border *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --bdr-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --bdr-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Stitched Border

HTML

CSS

Customizing this snippet

Similar border animations