Animated Dashed Border

Quick implementation

.animated-dashed-border-demo {
  position: relative;
  padding: 1.5rem 2rem;
  background: var(--card);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
}

.animated-dashed-border-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 2px;
  background: repeating-linear-gradient(
    45deg,
    var(--accent),
    var(--accent) 10px,
    transparent 10px,
    transparent 20px
  );
  -webkit-mask: 
    linear-gradient(oklch(1 0 0) 0 0) content-box, 
    linear-gradient(oklch(1 0 0) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: dash-move 2s linear infinite;
  pointer-events: none;
}

@keyframes dash-move {
  to { background-position: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-dashed-border-demo::before { animation: none; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a senior CSS developer. Create a reusable component for an animated dashed border using only CSS.

Requirements:
1. Use a pseudo-element (::before) with repeating-linear-gradient to create the dash pattern.
2. Animate the background-position to create the movement effect.
3. Use CSS variables for colors (var(--accent), var(--card)).
4. Include a @media (prefers-reduced-motion: reduce) block to disable animation.
5. Ensure the element uses mask-composite to show the border only.
6. Provide the HTML structure and the CSS.
7. Do not use SVG or JavaScript.
8. Use oklch() for any hardcoded colors if necessary.

Output the code in a single code block.

Why this matters in 2026

Animated borders draw attention without heavy assets. This technique relies on modern CSS masking and gradients, eliminating the need for SVG sprites or JavaScript libraries for simple motion effects.

The logic

We use a ::before pseudo-element filled with a repeating-linear-gradient to simulate dashes. By animating the background-position, the dashes appear to move. The mask-composite property ensures the gradient only shows where the border would be.

Accessibility & performance

Always respect user motion preferences using @media (prefers-reduced-motion: reduce). This ensures users with vestibular disorders aren't disoriented. The animation is GPU-accelerated via background-position, keeping main thread usage minimal.