AI CSS Animations

CSS Border Animations

60 CSS border animations: rotating gradient borders, glowing and neon borders, border draws, marching ants, rainbow and snake borders. Each one wraps a plain box, so it works on cards, buttons and inputs.

Rotating Gradient Border

The classic animated border: a multi-color conic gradient turns around a rounded box. A registered @property angle drives it, and padding-box plus border-box backgrounds keep the radius clean.

gradient · rotating · tailwind

Animated Gradient Border

Colors drift slowly back and forth around a light box. The gradient is three times the box size and its background-position eases between two ends, so it needs no @property at all.

gradient · minimal

Transparent Gradient Border

A rotating gradient border with a see-through middle, so it sits on any background or image. A mask with mask-composite exclude cuts the inside out of a conic-gradient layer.

gradient · rotating · minimal · tailwind

Border Beam

A short beam of light travels the edge of a dark box over a faint track, the look from AI and developer tool sites. A narrow conic arc on an @property angle, masked to the edge and given a glow.

gradient · rotating · glow

Glowing Gradient Border

A rotating gradient border with a soft bloom of the same colors spilling out behind it. The glow is a blurred copy of the conic layer, so the light turns with the border instead of sitting still.

gradient · rotating · glow · tailwind

Rainbow RGB Border

Diagonal rainbow bands stream around a black box like a gaming keyboard's RGB strip. A repeating gradient in a tile sized to its period slides one tile per loop, so the bands never jump.

rainbow · gradient

Shine Border

A bright glint sweeps across a gradient border every few seconds, with a faint sheen crossing the box behind it. The glint is a second background layer whose position animates, masked to the edge.

gradient · minimal

Gold Gradient Border

A polished gold frame with a fine inner line, where light rolls slowly around the metal. Bright and dark gold stops in a conic-gradient turn on an @property angle, which reads as moving highlights.

gradient · rotating

Animated Border Button

A pill button whose outline carries two bright comets that chase each other around it, so it keeps drawing the eye while it waits. A conic layer with two arcs sits between the face and a faint track.

button · gradient · rotating · tailwind

AI Gradient Input Border

A prompt field ringed by a soft rotating gradient that turns vivid and glows while you type. :focus-within transitions a registered @property that sets the color strength, so nothing jumps.

input · gradient · rotating

Running Gradient Border

Colors run around the whole perimeter at one steady speed, turning each corner without speeding up. Four gradient bands, one per side, move in step, which a single rotating conic cannot do.

gradient · minimal

Dual Border Beam

Two beams leave the top in opposite directions, cross at the bottom and meet again at the top. Two conic arcs read one @property angle, the second one mirrored, so they always meet in the middle.

gradient · rotating · minimal

Color Changing Border

The border, its tinted fill and the label glide through the color wheel together, one hue at a time. A hue-rotate() filter loop starts from your accent color and works in every browser.

rainbow · minimal

Multicolor Border

Each side of the box wears its own color, and every couple of seconds the colors hop one side clockwise. Plain border-color with four values animates here, so it works in every browser.

rainbow · minimal

Gradient Bottom Border

Only the bottom edge carries the border: a gradient bar that flows left to right under a panel, with a soft glow beneath. One background layer sized to the bottom strip loops its position.

gradient · minimal

Top Highlight Border

A bright gradient line glides back and forth along the top edge of a dark card and casts a soft light below it, the detail on many developer sites. Both layers move with transform only.

gradient · card · minimal

Story Ring Border

A round avatar inside a spinning gradient ring with a clean gap, like an unwatched story. The ring is a conic layer cut by a radial mask, so the gap stays transparent on any background.

gradient · rotating · tailwind

Pulsing Gradient Border

A gradient ring swells outward and thins again like slow breathing while its colors turn. The width is a registered @property length on a masked layer, so the box itself never changes size.

gradient · rotating

Holographic Border

A pastel foil border whose colors slide as if the card were tilting under a light, with a white sheen crossing the other way. Two background layers ease back and forth on alternate loops.

rainbow · gradient

Aurora Border

Green, teal and violet light drifts along the inside of a dark frame like the northern lights. Two conic layers turn at different speeds under a blur, with a crisp copy masked to the rim.

gradient · glow · rotating

Spotlight Border

A lamp at the bottom of the box swings a cone of light from side to side, lighting the border wherever it lands. The conic angle eases between two limits instead of turning all the way round.

gradient · glow · minimal

Stepped Rainbow Border

Six solid rainbow segments ring the box and tick forward one slot at a time. The conic-gradient uses hard color stops with small gaps, and each 60 degree step eases in and out on its own.

rainbow · rotating · gradient

Two Tone Border

Two colors share the border and play tug of war: the split drifts round while each side keeps winning and losing ground. One @property angle turns it and a second percentage moves the split.

gradient · rotating · minimal

Color Wipe Border

A new color paints itself clockwise over the old one, then the next color does the same, round after round. A conic stop sweeps on an @property percentage while two registered colors hand over.

gradient · rotating

Fire Border

Flame colors climb both sides of a dark box while a hot, flickering glow leaks out and upward. A vertical gradient loops its position upward, and a blurred copy flickers in opacity behind it.

gradient · glow

Mesh Gradient Border

Soft blobs of color wander around the frame and melt into each other, like a mesh gradient in motion. Three radial gradients ride two registered @property percentages instead of rotating.

gradient · rainbow

Grainy Gradient Border

A thick, slowly turning gradient frame with a film grain texture over the whole box, the riso print look. The grain is an inline SVG turbulence filter blended with overlay, so there is no image file.

gradient · rotating

Cut Corner Gradient Border

A sci-fi panel with two chamfered corners and a gradient edge that turns around it. clip-path erases normal borders, so the gradient fills the clipped box and a smaller clipped face sits on top.

gradient · rotating

Candy Stripe Border

Thick diagonal stripes in the accent and white roll around a frame like a barber pole. A repeating gradient in a tile exactly one stripe period wide slides one tile per loop, so it never stutters.

gradient · card

Offset Gradient Border

A gradient outline floats just off a white box and circles behind it, peeking out one side at a time like a misprinted layer. One transform keyframe of rotate, translate, rotate back moves it.

gradient · minimal

Snake Border

A line with a fading tail runs around the box like a snake and turns every corner. Four edge spans share one clock, each offset by its distance around the box, so the head never jumps.

draw · minimal

Neon Border

A neon tube framing a dark panel, with a hot white core, a colored halo and light spilling onto the wall. It hums and blinks out for a beat now and then. Only opacity animates.

neon · glow

Glowing Border

A soft halo in the accent color breathes around a light box, the outer glow most cards and inputs want. The halo is a shadow on a pseudo-element, so only its opacity animates.

glow · minimal · tailwind

Self-Drawing Border

A pen draws the outline around the box, holds, then its tail chases the head away and it starts over. An SVG rect with pathLength 100 turns the dash math into percentages of the perimeter.

draw · minimal

Marching Ants Border

The two-tone dashed outline of a selection box, marching clockwise with resize handles on every corner and edge. The dashes live on an SVG rect with pathLength, so the loop has no seam.

dashed · minimal

Electric Border

A crackling line of electricity wraps a dark panel and jumps between three shapes like an arc. SVG turbulence displaces each copy of the outline, and a stepped opacity loop flips between them.

glow · neon

Pulsing Glow Border

The border and its glow beat twice, then rest, like a heartbeat monitor. Good for live, recording or needs-attention states. A shadow ring on a pseudo-element scales and fades on a lub-dub keyframe.

glow · minimal

Corner Brackets Border

Four corner brackets stretch along the edges until they close into a full frame, hold, then pull back into corners. Eight gradient strips on one pseudo-element, sized by a single keyframe.

draw · minimal

Marquee Lights Border

A ring of bulbs like a theater marquee, with the light chasing around in steps. Three dotted SVG strokes share the bulbs between them and take turns lighting up, so nothing moves but opacity.

dashed · glow

Input Focus Border

An input whose border draws itself around the field when it gets focus, with a soft ring fading in behind. It erases the same way on blur, because it is a transition on an SVG stroke.

input · draw · tailwind

Neon Sign Border

Two neon tubes on a dark sign stutter on one after the other, hold, blink twice together and go dark. The unlit glass stays faintly visible. Each tube is one element, and only opacity animates.

neon · glow

Inner Glow Border

Light pools inside the edges of the box and washes inward, then ebbs back to a thin glowing rim. Two inset shadows on pseudo-elements, faded with opacity, so the middle stays clear for content.

glow · minimal

Ripple Border

Rings ripple out from the border and fade, one after another, like a call coming in. Each ring is an outline on a pseudo-element with a growing outline-offset, so it keeps the rounded corners.

glow · minimal

Blinking Border

A warning border that flashes twice, holds, and repeats, so the box grabs attention without moving. The flash is a hard step on the border layer's opacity, not a fade, like an alarm light.

glow · minimal

Glitch Border

A dark panel whose border tears into sliced, color-split copies for a split second, then snaps back. The copies are clip-path slices on a stepped keyframe, idle most of the loop so it stays readable.

neon · glow

Countdown Timer Border

The border empties clockwise from the top like a timer while the number counts down, then refills. The number is a CSS counter fed by a registered @property integer, so no script runs it.

draw · minimal

Dashed to Solid Border

Rounded dashes flow around the box, stretch until they join into one solid line, then break apart again. Both the dash length and the dash offset of an SVG stroke animate, on separate clocks.

dashed · draw

Dotted Wave Border

A ring of small dots with a wave of larger, brighter dots traveling around it. The big dots sit under an SVG mask whose soft dash circles the outline, so dots swell in place instead of sliding.

dashed · minimal

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.

dashed · minimal

Stitched Border

A denim patch that gets sewn up: stitches appear one at a time around the edge, hold, then unravel. An SVG mask draws on stepped timing, one step per stitch, so each stitch pops in whole.

dashed · draw

Lightsaber Border

A glowing blade ignites out of a hilt at the bottom, races around both sides to meet at the top, hums, then retracts. Two SVG halves draw with stroke-dashoffset on the same clock.

glow · draw

Scanner Frame Border

Rounded viewfinder corners breathe around a code while a glowing scan line sweeps up and down, the camera screen of every QR payment app. The corners are one border masked down to its four corners.

glow · minimal

Film Strip Border

A frame of film between two rows of sprocket holes that roll past as if it were running through a projector. Each row is one wide gradient strip, slid by exactly one hole per loop with transform.

dashed · minimal

Hand-Drawn Border

A pencil sketch of a box with overshooting corners and doubled strokes that boil between three drawings, like hand-drawn animation. Three SVG paths swap on a stepped opacity loop.

draw · minimal

Morphing Blob Border

The outline melts between organic blob shapes while a thinner echo trails a few seconds behind. Only border-radius animates, eight values per shape, so the box never changes size or shifts layout.

minimal · glow

8-Bit Pixel Border

A notched pixel frame with a snake crawling around it one block at a time, like a handheld game from 1998. The snake is an SVG dash on steps() timing with crisp edges, so every block stays square.

draw · minimal

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.

draw · minimal

Loading Border

An arc chases itself around the box, stretching out and snapping short like the Material spinner, for boxes that are busy but have no progress to show. Dash length and offset share one keyframe.

draw · minimal

Underline Input Border

A minimal input with only a bottom border. On focus an accent line grows out from the center and the label takes its color. The line is a scaled span, so it animates on the compositor, no reflow.

input · draw · minimal · tailwind

Invalid Input Shake Border

An email field that shakes once and glows red when the address is invalid, then draws a green check once it is fixed. Pure CSS: :invalid plus :not(:placeholder-shown), so it waits for typing.

input · glow

How to use these border animations

Open any border, copy the HTML and CSS, and put your own content inside the box. The border is drawn with a pseudo-element, a background-clip layer or a mask, so it never changes the box's size or shifts the layout while it animates.

To change the color, set --bdr-color; gradients and glows are mixed from it. To change the size, set --bdr-size: the border width, radius and glow are in em.

Rotating gradient borders animate a registered @property angle, which every current browser supports; older ones show a still gradient border. Every snippet ships with a prefers-reduced-motion rule that stops the motion.

Frequently asked questions

How do I animate a border in CSS?

A border itself can't hold a gradient or move. Draw it with a pseudo-element or a background-clip: border-box layer, then animate its transform, background-position or an @property angle.

How do I make a gradient border with border-radius?

Use two backgrounds with a transparent border: a solid fill clipped to padding-box and the gradient clipped to border-box. For a see-through middle, mask the inside with mask-composite: exclude.

How do I make a rotating gradient border?

Register an angle with @property, use it as the start of a conic-gradient, and animate it from 0deg to 360deg. The rotating entries above are complete.

How do I make a border glow?

Stack box-shadow layers in the accent color for an outer glow and add an inset shadow for an inner glow. Use filter: drop-shadow() for shapes that aren't rectangles.

Does @property work in all browsers?

Yes. It has been supported everywhere since Firefox 128 shipped it in mid 2024. Older browsers ignore the animation and show a static gradient border.