Double Dashed Border: CSS Border Animation

Double Dashed Border

Two dashed outlines, one inside the other, flow in opposite directions like a pair of meshing gears. Each is an SVG rect with pathLength 100 and a whole number of dashes, so neither loop has a seam.

Also known as: double border animation css, counter rotating border, double border css.

In transit

Color Base size 16px Dark background Hold hover state

HTML

<div class="bdr-double-dashed-border">
  <svg class="bdr-double-dashed-border-outer" aria-hidden="true"><rect width="100%" height="100%" pathLength="100"/></svg>
  <svg class="bdr-double-dashed-border-inner" aria-hidden="true"><rect width="100%" height="100%" pathLength="100"/></svg>
  In transit
</div>

CSS

.bdr-double-dashed-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;
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-double-dashed-border-outer,
.bdr-double-dashed-border-inner {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.bdr-double-dashed-border-outer {
  inset: 0;
  width: 100%;
  height: 100%;
}
.bdr-double-dashed-border-inner {
  inset: 0.45em;
  width: calc(100% - 0.9em);
  height: calc(100% - 0.9em);
}
.bdr-double-dashed-border rect {
  fill: none;
  stroke-linecap: round;
}
.bdr-double-dashed-border-outer rect {
  rx: 1em;
  stroke: var(--c);
  stroke-width: 0.16em;
  stroke-dasharray: 3 2;
  animation: bdr-double-dashed-border-cw 3s linear infinite;
}
.bdr-double-dashed-border-inner rect {
  rx: 0.6em;
  stroke: color-mix(in srgb, var(--c) 55%, transparent);
  stroke-width: 0.1em;
  stroke-dasharray: 1.2 1.3;
  animation: bdr-double-dashed-border-ccw 3s linear infinite;
}
@keyframes bdr-double-dashed-border-cw {
  to { stroke-dashoffset: -10; }
}
@keyframes bdr-double-dashed-border-ccw {
  to { stroke-dashoffset: 10; }
}

@media (prefers-reduced-motion: reduce) {
  .bdr-double-dashed-border, .bdr-double-dashed-border *, .bdr-double-dashed-border::before, .bdr-double-dashed-border::after, .bdr-double-dashed-border *::before, .bdr-double-dashed-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.

Double Dashed Border

HTML

CSS

Customizing this snippet

Similar border animations