CSS Borders & Outlines Effects

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.

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.

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.

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.

Photographic print mounted by four translucent tape strips across its corners, the top pair peeling further out on hover.

Panel framed as a page torn from a binder — three punched holes cut down the left edge from one stacked box-shadow, a red margin rule beside them and faint horizontal rules across the plate, sliding free of the rings on hover.

Outer border with an inset rule that pulls further in on hover, so the frame breathes without the box itself resizing.

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.

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.

Technical-drawing frame on faint graph lines with centre tick marks on each edge and crosshair corners.

Double-ruled plate with flourished corner pieces finished by a bead, the corners drawing further along the rules on hover.

Warning panel edged with a twelve-pixel band of diagonal caution stripes that crawl continuously around the box, the dark plate inset inside it carrying a faint amber keyline.

Thick rounded border coloured magenta on the top-right and cyan on the bottom-left, swapping halves on hover.

Panel edged with triangular teeth on all four sides, cut by four repeating conic masks the way a postage stamp is perforated.

Outlined note whose bottom-right corner is folded back, the flap painting over the frame so the diagonal becomes the new hairline edge, and peeling further open on hover.

Receipt-style panel with a sawtooth torn bottom edge cut by clip-path and a coloured tape line on top.

Tooltip outline whose pointer is a rotated square carrying two of the four border sides, its fill blanking the panel stroke behind it so the hairline runs unbroken into the tail — which slides the length of the edge on hover.

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.