Gradient outlines, running lights, dashes and glow rings.
A real animated border needs a trick, because `border-color` alone cannot hold a gradient. The two that work are a conic gradient on a pseudo-element rotated behind the box, and `background-clip: padding-box` over a gradient background. Both are here, and both cost one extra layer — worth it once, on a featured card, and not worth it on every row of a table.
An ocean light sweeps continuously around the border edge.
Dashed blue outline whose dashes crawl around the box — the classic dropzone cue.
Two blue corner brackets that grow into a full frame on hover.
Outline pushes away from the button and blooms into an ocean glow on hover or keyboard focus.
The modern gradient border: painted on a pseudo-element and masked to a 1px ocean ring, so the radius stays true.
An ocean light packet chasing the border. Uses @property so the conic angle is a real animatable value, not a transform hack.
Two ocean corner brackets that grow into a complete frame when hovered.
Outer border with an inset rule that pulls further in on hover, so the frame breathes without the box itself resizing.
A dashed box over a solid one offset behind it; on hover the two close the gap, so the whole thing reads as pressing down.
Four repeating gradients as edges rather than a dashed border, which is the only way to animate the dashes travelling around the box.
Two opposing corner brackets that grow to meet as a full frame on hover, so the border draws itself from both ends at once.
Rule that draws left-to-right on enter and retracts to the right on leave, by flipping `transform-origin` between the two states.
Selection state built entirely from stacked box-shadows — hairline, inner bloom and outer halo — so nothing about the element's size changes.
Fieldset-style frame where the label sits in a gap punched through the stroke, the notch made by matching the label background to the surface rather than by clipping.
Dashed arc border built from a conic gradient rather than dash properties, masked to a hairline so the segments can carry three colours and still rotate as one piece.
Wobbly ink frame from asymmetric elliptical border-radii doubled at an offset, the two strokes disagreeing just enough to read as drawn rather than computed.
Manila-folder outline where the tab's bottom stroke is painted out to join the panel, so the two shapes share one continuous border instead of stacking.
Dashed border with a punched perforation line and semicircular notches, so the stub reads as tearable.
Technical-drawing frame on faint graph lines with centre tick marks on each edge and crosshair corners.
Thick rounded border coloured magenta on the top-right and cyan on the bottom-left, swapping halves on hover.
Receipt-style panel with a sawtooth torn bottom edge cut by clip-path and a coloured tape line on top.
Solid dark rim with a pale dashed seam stitched just inside it, the seam pulling tighter to the edge on hover.
Octagonal panel whose bevelled corners keep a crisp gradient rim by nesting two matching clip-paths.
Panel edged with triangular teeth on all four sides, cut by four repeating conic masks the way a postage stamp is perforated.
Showing 24 of 30. Search the rest →
Solid, outline, ghost, gradient and glow — every state included.
Layered shadows that read as light rather than as a border.
Browser chrome, phone frames, terminals and screenshot surrounds.
Waves, slants, zigzags and fades between page sections.
Blobs, polygons, arrows and reveal masks, all in one property.
Duotones, colour burns, knockout text and filter stacks.