#border CSS effects

3,995 free, pure-CSS effects match the "border" tag. Each is copy-ready and needs no library or build step.

Live preview Forms

Monochrome Theme Input

Pure monochrome grayscale input with subtle elevation.

#shadow #border

Live preview Forms

Neon Glow Input

Input with bright neon cyan glow effect on focus.

#shadow #border

Live preview Forms

Paper Texture Input

Vintage paper styled input with warm tones and serif font.

#gradient #shadow #border

Live preview Forms

Pastel Soft Input

Soft pastel themed input with candy colors and rounded corners.

#shadow #border

Live preview Forms

Retro Terminal Input

Old terminal CRT style with green phosphor text.

#shadow #border

Live preview Forms

Vaporwave Gradient Input

Vaporwave aesthetic with pink-purple gradient and retro grid.

#gradient #shadow #border

Live preview Forms

Underline Focus Field

A minimal field where only the baseline exists, and it fills in from the centre.

#gradient #transform #border

Live preview Forms

Valid Background Input

Background subtly turns green-tinted when valid.

#gradient #shadow #border

Live preview Forms

Valid Border Bottom Input

Underline turns green when content is valid.

#border

Live preview Forms

Valid Bounce Input

Input bounces once when content becomes valid.

#animation #transform #shadow

Live preview Forms

Animated Check Mark Input

Checkmark draws itself in SVG-style when valid.

#animation #transform #shadow

Live preview Forms

Valid Fade In Message

Success message fades in below input when valid.

#shadow #border

Live preview Forms

Valid Green Glow Input

Input emits a soft green glow when content is valid.

#shadow #border

Live preview Forms

Valid Green Border Input

Input that turns entirely green when valid.

#shadow #border

Live preview Forms

Valid Icon Pop Input

Green icon pops in with elastic bounce when valid.

#animation #transform #shadow

Live preview Forms

Valid Message Input

Input that shows a green success message below when valid.

#transform #shadow #border

Live preview Forms

Valid Pulse Input

Input border pulses green when content is valid.

#animation #shadow #border

Live preview Hover

BG Water Ripple

Water-like ripple on hover.

#hover #animation #gradient

Live preview Hover

Blinds Roll Up

Horizontal venetian blind slats roll up one-by-one to reveal content on hover.

#gradient #hover #shadow

Live preview Hover

Border Beam Trace

Light beam traces around border on hover.

#hover #animation #gradient

Live preview Hover

Border Conic Spin

Conic gradient border spins on hover.

#hover #animation #gradient

Live preview Hover

Border Corner Accent

Corner accent brackets grow on hover.

#hover #border

Live preview Hover

Corner Bracket Frame

Four corner brackets slide inward and lock around the content when hovered.

#hover #transform #border

Live preview Hover

Border Dotted March

Dotted border marches around on hover.

#hover #animation #border

Live preview Hover

Border Double Line

Double-line border draws on hover.

#hover #shadow #border

Live preview Hover

Border Glow Trace

Glowing dot traces around border on hover.

#hover #animation #gradient

Live preview Hover

Border Neon Edge

Neon glow edge border on hover.

#hover #shadow #border

Live preview Hover

Border Pulse Glow

Border pulses with glow on hover.

#hover #animation #shadow

Live preview Hover

Border Unwrap

Border unwraps from one side on hover.

#hover #border

Live preview Hover

Neon Static

Static neon glow on hover.

#hover #shadow #border

Live preview Hover

Onyx Black

Onyx deep black shine on hover.

#hover #gradient #shadow

Live preview Hover

Corner Border Draw

Four accent corner brackets draw inward on hover, framing the content.

#hover #border #transform

Live preview Hover

Electric Cyan

Electric cyan outline crackles on hover.

#hover #shadow #border

Live preview Hover

Evaporate Up

Content floats upward with a vertical blur as if evaporating on hover.

#gradient #hover #border

Live preview Hover

Fade & Slide Up

Default label fades up and out while a new label fades up into place on hover.

#hover #border #transform

Live preview Hover

Flip 3D Card

Card-style 3D flip on hover.

#hover #transform #border

Live preview Hover

3D Tilt Edge Frame

Frame tilts in 3D while edges highlight on hover.

#hover #transform #shadow

Live preview Hover

Bracket Loosen

Inner brackets loosen outward to release the element on hover.

#hover #transform #border

Live preview Hover

Bracket Snap

Two L-brackets snap together to form a frame on hover.

#hover #transform #border

Live preview Hover

Bracket Tighten

Outer brackets tighten inward to grip the element on hover.

#hover #transform #border

Live preview Hover

Cassette Flap Frame

Top flap opens like a cassette tape on hover.

#hover #transform #border

Live preview Hover

Chevron Trace Frame

Chevron pattern traces the border on hover.

#hover #gradient #transform

Live preview Hover

Corners Slide Frame

Four corner brackets slide inward from each edge on hover.

#hover #border

Live preview Hover

Dotted Crawl Frame

Dotted border slowly crawls around on hover.

#hover #animation #border

Live preview Hover

Double Trace Frame

Two borders trace around the element on hover.

#hover #transform #border

Live preview Hover

Fire Edge Frame

Burning ember effect glows along the edge on hover.

#hover #animation #shadow

Live preview Hover

Fold Out Frame

Frame panels fold outward like opening a box on hover.

#hover #transform #shadow

Live preview Hover

Strong Glow Edge

Strong neon glow surrounds the element on hover.

#hover #shadow #border

Live preview Hover

Glow Pulse Edge

Edges pulse with glowing animation on hover.

#hover #animation #shadow

Live preview Hover

Ice Edge Frame

Crystalline ice frost forms on the edges on hover.

#hover #shadow #border

Live preview Hover

Origami Corner Frame

Origami paper folds unfold at corners on hover.

#hover #border

Live preview Hover

Rotate Square Frame

Outer square frame rotates around the element on hover.

#hover #animation #transform

Live preview Hover

Scale Edge Frame

Border scales from outside inward to frame the element on hover.

#hover #transform #border

Live preview Hover

Stripes Slide Frame

Diagonal stripes slide across the border on hover.

#hover #gradient #border

Live preview Hover

Twist Corner Frame

Corners twist into place with 3D rotation on hover.

#hover #transform #border

Live preview Hover

VHS Trace Frame

VHS tracking distortion lines trace the border on hover.

#hover #animation #gradient

Live preview Hover

Wavy Line Frame

Wavy line undulates around the border on hover.

#hover #shadow #border

Live preview Hover

Zipper Open Frame

Zipper teeth separate as frame opens on hover.

#hover #gradient #border

Live preview Hover

Frost Freeze

Icy crystal pattern forms over the panel with a frosted blue tint on hover.

#gradient #hover #shadow

Live preview Hover

Glow Border

A neon border glow softens and brightens on hover.

#glow #hover #shadow

Live preview Hover

Gradient Sweep

A diagonal gradient band sweeps across the button on hover.

#gradient #hover #border

Live preview Hover

Grain Texture Reveal

A subtle film-grain noise texture fades in over the panel on hover.

#hover #border #transform

Live preview Hover

Image Zoom Overlay

Image scales up gently while a dark overlay fades in with a caption.

#gradient #hover #border

Live preview Hover

Implode

Content shrinks toward a central point with a vortex glow on hover.

#gradient #hover #border

Live preview Hover

Letter-Spacing Expand

Text loosens its letter-spacing and inverts color on hover.

#hover #border

Live preview Hover

Lift Card Shadow

Card lifts upward with a soft, diffuse shadow on hover.

#hover #shadow #border

Live preview Hover

Melt Drip

Button melts downward with drooping corners and a falling drip on hover.

#gradient #hover #border

Live preview Hover

Motion Smear

Label smears horizontally with a directional blur as if caught mid-motion on hover.

#gradient #hover #border

Live preview Hover

Neon Pink Glow

Hot pink neon glow surrounds on hover.

#hover #shadow #border

Live preview Hover

OKLCH Lift Tile

One OKLCH base colour feeds the surface, border and shadow through color-mix.

#hover #border #shadow

Live preview Hover

Orbit Circle

Circular orbital path on hover.

#hover #border

Live preview Hover

Orbit Ellipse

Elliptical orbit on hover.

#hover #border

Live preview Hover

Spiral In Particles

Particles spiral inward toward the element on hover.

#hover #animation #transform

Live preview Hover

Push Reveal

Top label pushes up and out, pulling a second label up from below on hover.

#hover #border #transform

Live preview Hover

Rim Light Edge

Bright rim light traces edges on hover.

#hover #shadow #border

Live preview Hover

Ripple Pulse

An expanding ring ripples outward from the button on hover.

#gradient #hover #border

Live preview Hover

Rotate 3D Book

Book-opening flip on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Box

Box lid flip open on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Card

Playing card 3D flip on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Door

Door-swing rotation on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Envelope

Envelope flap fold on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Page

Page-turn 3D flip on hover.

#hover #transform #border

Live preview Hover

Scale + Blur Background

Background scales up and blurs while a foreground panel focuses in.

#gradient #hover #shadow

Live preview Hover

Scanline Sweep

A bright CRT scanline sweeps vertically down the panel on hover.

#gradient #animation #hover

Live preview Hover

Shadow Clone

Two blurred echo clones offset diagonally behind the button on hover.

#gradient #hover #shadow

Live preview Hover

Shatter Glass

Shatters into glass shards on hover.

#hover #gradient #transform

Live preview Hover

Shine Line Sweep

A bright shine band sweeps diagonally across the icon button.

#gradient #hover #border

Live preview Hover

Shutter Close

Four triangular shutter blades sweep in from the corners to close over the panel on hover.

#gradient #hover #shadow

Live preview Hover

Skew Tilt Button

Button skews horizontally on hover for a playful tilt.

#gradient #hover #shadow

Live preview Hover

Slide Reveal Overlay

A colored panel slides up from below, swapping the label text color.

#gradient #hover #border

Live preview Hover

Cursor Spotlight

A radial spotlight follows the cursor across the surface on hover.

#gradient #hover #border

Live preview Hover

Static Noise

TV static noise overlay fills the panel with rapid random flicker on hover.

#animation #hover #border

Live preview Hover

Teleport Poof

Button puffs out into a smoke ring and reappears with a flash on hover.

#animation #hover #border

Live preview Hover

TV Turn Off

Panel collapses to a thin horizontal line then fades like an old TV switching off.

#gradient #hover #border

Live preview Hover

Venetian Tilt

Vertical venetian blind slats rotate in 3D to let light through on hover.

#gradient #hover #3d

Live preview Loaders

Arc Bounce Swing

Arc swinging like a pendulum and bouncing.

#animation #transform #border

Popular tags