← All elements
<div class="mb">Marching ants</div>About this border
A dashed outline whose dashes march around the box, made from a repeating gradient background that slides in a loop.
How it works
Four linear-gradient backgrounds, one for each edge, are made to look like dashes by giving them a 16 pixel size where half is colour and half is transparent. A keyframe moves each background position in a different direction, so the dashes seem to march clockwise around the box, like an animated selection outline.
Ways to customise it
- Change #0f172a to colour the dashes.
- Edit the 16px size for longer or shorter dashes.
- Change the 1s duration.
Good to know
Decorative and stops for reduced motion. It uses backgrounds, so it does not change layout. For a static dashed border, plain border-style dashed is enough.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.