#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

Retro Lever Switch

Vintage lever-style switch with metallic knob and base.

#gradient #transform #shadow

Live preview Forms

Ring Switch

Toggle that emits an expanding ring on activation.

#animation #transform #border

Live preview Forms

Row Switch

Horizontal switch row with leading icon and label.

#transform #border

Live preview Forms

Sharp Switch

Aggressive angular switch with cyberpunk feel.

#transform #shadow #border

Live preview Forms

Square Switch

Square track switch with sharp corners and minimal aesthetic.

#transform #border

Live preview Forms

Stacked Switches

Vertically stacked switches for a settings list.

#hover #transform #border

Live preview Forms

Framed Textarea

A resizable textarea whose frame and counter recolour together while focused.

#border #shadow #focus

Live preview Forms

Textarea with Char Counter

Textarea with a live character counter display.

#shadow #border

Live preview Forms

Dark Themed Textarea

Deep dark textarea with subtle inner shadow.

#shadow #border

Live preview Forms

Floating Label Textarea

Textarea with a floating label that animates on focus.

#shadow #border

Live preview Forms

Glow Textarea

Textarea with a soft glow effect on focus.

#shadow #border

Live preview Forms

Minimal Textarea

Clean minimal textarea with thin border.

#shadow #border

Live preview Forms

Rounded Textarea

Fully rounded textarea with smooth corners.

#shadow #border

Live preview Forms

Underline Textarea

Minimalist textarea with just a bottom underline.

#border

Live preview Forms

3D Pressable Input

3D input that appears to depress when focused.

#gradient #transform #shadow

Live preview Forms

Aurora Background Input

Input with shifting aurora gradient background.

#animation #gradient #border

Live preview Forms

Cyberpunk Neon Input

Cyberpunk styled input with neon pink-cyan glow and corner cuts.

#shadow #border

Live preview Forms

Dark Theme Input

Dark themed input with gradient background and indigo glow on focus.

#gradient #shadow #border

Live preview Forms

Elevated Card Input

Input wrapped in an elevated card that lifts higher on focus.

#transform #shadow #border

Live preview Forms

Dark Glassmorphism Input

Frosted dark glass input with backdrop blur and gradient sheen.

#gradient #shadow #border

Live preview Forms

Animated Gradient Border Input

Input with animated rotating gradient border around it.

#animation #gradient #border

Live preview Forms

Light Theme Input

Clean light theme input with subtle shadow and rounded corners.

#shadow #border

Live preview Forms

Minimal Underline Input

Ultra minimal input with only a bottom underline that grows on focus.

#transform #border

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 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 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

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

Effects tagged #border

Popular tags