Wavy Border: CSS Border Animation

Wavy Border

Each edge of the box is a wave that swings back and forth like a plucked string, pinned at the rounded corners. Every edge path flips with scale, and a non-scaling stroke keeps the line width steady.

Also known as: wavy border css, wave border animation, squiggly border css.

Making waves

Color Base size 16px Dark background Hold hover state

HTML

<div class="bdr-wavy-border">
  <svg class="bdr-wavy-border-svg" viewBox="0 0 150 85" preserveAspectRatio="none" aria-hidden="true">
    <path class="bdr-wavy-border-corners" d="M0 10A10 10 0 0 1 10 0M140 0A10 10 0 0 1 150 10M150 75A10 10 0 0 1 140 85M10 85A10 10 0 0 1 0 75"/>
    <path class="bdr-wavy-border-x" d="M10 0Q16.5-4.4 23 0T36 0T49 0T62 0T75 0T88 0T101 0T114 0T127 0T140 0"/>
    <path class="bdr-wavy-border-y" d="M150 10Q154.4 16.5 150 23T150 36T150 49T150 62T150 75"/>
    <path class="bdr-wavy-border-x" d="M140 85Q133.5 89.4 127 85T114 85T101 85T88 85T75 85T62 85T49 85T36 85T23 85T10 85"/>
    <path class="bdr-wavy-border-y" d="M0 75Q-4.4 68.5 0 62T0 49T0 36T0 23T0 10"/>
  </svg>
  Making waves
</div>

CSS

.bdr-wavy-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-wavy-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.2em color-mix(in srgb, var(--c) 45%, transparent));
  pointer-events: none;
}
.bdr-wavy-border-svg path {
  fill: none;
  stroke: var(--c);
  stroke-width: 0.16em;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: bdr-wavy-border-x 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bdr-wavy-border-svg .bdr-wavy-border-x { animation-name: bdr-wavy-border-x; }
.bdr-wavy-border-svg .bdr-wavy-border-y { animation-name: bdr-wavy-border-y; animation-delay: -0.7s; }
.bdr-wavy-border-svg .bdr-wavy-border-corners { animation: none; }
@keyframes bdr-wavy-border-x {
  from { transform: scaleY(1); }
  to   { transform: scaleY(-1); }
}
@keyframes bdr-wavy-border-y {
  from { transform: scaleX(1); }
  to   { transform: scaleX(-1); }
}

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

Wavy Border

HTML

CSS

Customizing this snippet

Similar border animations