The border beam is the popular accent where a small bright bead of light travels continuously around a card border, tracing the rounded rectangle like a comet on a track. This snippet builds it primarily with CSS Motion Path — the modern offset-path API — so the beam follows the exact border with almost no code, and it includes a JavaScript fallback for older browsers.

CSS Motion Path does the work

The beam is a small gradient pill, and its position is controlled by offset-path: rect(0 100% 100% 0 round 18px), which defines a rounded-rectangle track matching the card border. Animating offset-distance from 0% to 100% slides the beam along that path, and offset-rotate: auto keeps the pill oriented along the direction of travel, so it banks around the corners naturally. This is the entire animation — no SVG path, no per-frame JavaScript, and the browser composites it on the GPU.

A comet, not a dot

The bead is a 90px-wide pill with a linear-gradient that fades from transparent to bright and back, plus a colored drop-shadow. Because it is elongated and oriented along the path, it reads as a streak of light with a glowing head rather than a plain dot — the comet look. A second beam with a different color and a -2s animation delay travels the same path on the opposite side, so two beams chase each other around the border.

Confined to the card

The card uses overflow: hidden and isolation: isolate, so the beams and their glow are clipped to the rounded shape and the stacking context stays self-contained. The card body sits above the beams via z-index, so the light passes behind the content along the edge without obscuring the icon, text, or button.

The fallback

CSS Motion Path is widely supported, but the script checks CSS.supports('offset-path', ...) and, only if unsupported, animates each beam manually. The fallback computes the card perimeter and walks a position parameter around it each frame, mapping the distance to x/y coordinates along the four edges and translating the beam there. This guarantees the effect still runs everywhere, while modern browsers get the cheaper pure-CSS path. Most users never execute the fallback at all.

Why offset-path over alternatives

Older border-light effects rotate a huge conic gradient behind a masked panel (like a spinning ring) or animate an SVG stroke. offset-path is more precise — the beam genuinely follows the border including the corner radius — and lighter, since it animates a single property on a tiny element. It also makes the speed and direction trivial to control through the animation, and supports multiple independent beams on one path.

Customizing it

Change the round radius in offset-path to match your card, recolor the beam gradients, lengthen the pill for a longer tail, retime the loop for a faster or slower orbit, or add more beams with staggered delays. Use it on buttons or inputs by giving them the same beam and a matching path. Pair it with a shimmer button or a meteor card for a coordinated set of glowing components.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to puzzle out the offset-path geometry or the perimeter-walking fallback by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how offset-path: rect(0 100% 100% 0 round 18px) combined with offset-rotate: auto makes the beam bank correctly around the card's rounded corners, and how the JS fallback's perimeter math (the four if/else branches mapping distance to x/y) reproduces that same path manually. The same assistant can help optimize it — asking whether the CSS.supports feature check should be cached at module load instead of re-run, or whether the fallback's requestAnimationFrame loop could pause when the card is off-screen. It's also useful for extending the effect: ask it to make the beam speed or color react to a hover state, support a non-rectangular card shape, or add a third beam on its own path offset. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "border beam" effect in plain HTML, CSS, and JavaScript where a glowing bead of light continuously travels around a card's rounded border, using the CSS Motion Path offset-path property as the primary mechanism, with a JavaScript fallback for browsers that lack support.

Requirements:
- A card with position: relative, overflow: hidden, and isolation: isolate so glow effects are clipped to its rounded shape and don't affect surrounding stacking context.
- A small elongated pill element (not a plain circle) whose position is driven by offset-path set to a rounded-rectangle path matching the card's exact border-radius, animated by transitioning offset-distance from 0% to 100% on an infinite loop, with offset-rotate set to auto so the pill's orientation follows the direction of travel around corners.
- Style the pill with a linear-gradient that fades from transparent through a bright color and back to transparent, plus a colored drop-shadow, so it reads as a comet with a glowing head rather than a flat dot.
- Add a second beam on the same path using a different gradient color and a negative animation-delay so it appears to chase the first beam from the opposite side.
- Detect offset-path support at runtime with CSS.supports, and only when it is unsupported, run a JavaScript fallback that computes the card's actual pixel perimeter (2 * (width + height)), walks a position value around it every animation frame, maps that position to x/y coordinates along the four straight edges, and moves the beam there with a CSS transform — without ever running this fallback loop in browsers that do support offset-path.
- Keep the card's text content in a stacking layer above the beams via z-index so the light passes behind the content, not over it.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA card renders with a bead of light circling its border.
2
Watch the beamIt traces the rounded rectangle and banks around corners.
3
Spot the second beamA different-colored beam chases it from the opposite side.
4
Match your radiusSet the offset-path round value to your card radius.
5
Recolor the beamsEdit the gradient colors and glow.
6
Add more beamsDuplicate with staggered animation delays.

Real-world uses

Common Use Cases

Featured plan cards

Highlight a tier beside a pricing card.

Premium upsells

Pair with a meteor card set.

AI product cards

Match a shimmer button CTA.

Highlighted inputs

Run a beam around a focused field.

Dashboard widgets

Draw attention to a metric card grid tile.

Motion Path demos

A reference for offset-path border animation.

Got questions?

Frequently Asked Questions

The beam uses CSS Motion Path: offset-path defines a rounded-rectangle track matching the card border, and animating offset-distance from 0% to 100% slides the beam along it. offset-rotate: auto keeps the pill oriented along the direction of travel so it banks around the corners. That single animation is the whole effect — no SVG and no per-frame JavaScript.

The bead is a 90px-wide pill filled with a gradient that fades from transparent to bright and back, plus a colored drop-shadow. Because it is elongated and oriented along the path, it reads as a streak of light with a glowing head rather than a round dot, giving the comet appearance.

The script checks CSS.supports for offset-path and, only when it is unsupported, animates each beam manually. The fallback computes the card perimeter and walks a position around the four edges each frame, translating the beam to the matching x/y. Modern browsers skip this entirely and use the cheaper pure-CSS path.

A conic-gradient ring spins a large element behind a mask, which approximates a border. offset-path is more precise — the beam genuinely follows the border including the corner radius — and lighter, animating one property on a tiny element. It also supports multiple independent beams on the same path with staggered delays.

The CSS, including offset-path, ports directly — wrap it in a component and set the path radius to match your card. Run the support check and fallback in a mount effect with cleanup that cancels the animation frame on unmount, using refs for the beams. In Tailwind, apply the offset-path and animation via arbitrary values and keep the fallback in the component logic.

Loading…