#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

Search Input with Clear Button

Search input that shows a clear (×) button when typed.

#hover #transform #shadow

Live preview Forms

Floating Label OTP

OTP boxes with floating placeholder text.

#transform #border

Live preview Forms

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Live preview Forms

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#animation #transform #border

Live preview Forms

3D Search Bar

Skeuomorphic 3D search bar with depth.

#transform #shadow #border

Live preview Forms

Icon Background Search

Search bar with icon in a colored background square.

#transform #shadow #border

Live preview Forms

Square Select Dropdown

Sharp-cornered square select with bold border.

#transform #border

Live preview Forms

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

#shadow #border

Live preview Forms

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Live preview Forms

Segmented Switch

Segmented toggle group with sliding indicator between options.

#hover #shadow #border

Live preview Forms

Bordered Textarea

Textarea with a colored left accent border.

#shadow #border

Live preview Forms

Glassmorphism Textarea

Frosted glass textarea with translucent background.

#shadow #border #filter

Live preview Forms

Brutalist Hard Edge Input

Brutalist design with hard borders, monospace and offset shadow.

#transform #shadow #border

Live preview Forms

Flat Material Input

Flat material design input with no shadows or bevels.

#border

Live preview Forms

Light Glassmorphism Input

Light frosted glass input with soft white glow on focus.

#gradient #shadow #border

Live preview Forms

Neumorphic Soft Input

Soft neumorphic input with inset shadow on focus.

#shadow #border

Live preview Forms

Valid Check Mark Input

Input that shows a green checkmark when valid.

#transform #shadow #border

Live preview Forms

Valid Icon Input

Input with a checkmark icon that appears when valid.

#transform #shadow #border

Live preview Forms

Success State Input

Input with full success state — green border, check, and label color.

#transform #shadow #border

Live preview Forms

Valid Underline Input

Bottom underline grows in green when valid.

#transform #border

Live preview Hover

Border Dash March

Dashed border marches around on hover.

#hover #animation #border

Live preview Hover

Border Draw Full

Border draws around all sides on hover.

#hover #border

Live preview Hover

Border Expand Out

Border outline expands outward on hover.

#hover #transform #border

Live preview Hover

Border Rainbow Flow

Rainbow border flows on hover.

#hover #animation #gradient

Live preview Hover

Color Swap Fast

Foreground and background colors swap on hover.

#hover #transform #border

Live preview Hover

Curtain Open

Two colored curtains split apart horizontally to reveal content on hover.

#gradient #hover #shadow

Live preview Hover

Cyber Glitch

Cyberpunk RGB-split glitch with rapid clip-path jumps on hover.

#animation #hover #border

Live preview Hover

Dissolve to Dots

A dotted overlay fades in over the panel, dissolving the content into a dot matrix on hover.

#gradient #hover #border

Live preview Hover

Explode Out

Colored shards burst outward in all directions with scaling and fading on hover.

#gradient #hover #border

Live preview Hover

Flip 3D Door

Door-swing 3D flip on hover.

#hover #transform #border

Live preview Hover

Flip Card

Card flips in 3D to reveal its back face on hover.

#gradient #hover #3d

Live preview Hover

Fold Corner

Corner folds over on hover.

#hover #border

Live preview Hover

Arrow Corner Frame

Arrow-shaped accents point inward at each corner on hover.

#hover #transform #border

Live preview Hover

Fast Corner Trace

Single corner accent traces all four corners quickly on hover.

#hover #animation #transform

Live preview Hover

Cyber Corner Frame

Cyberpunk-style corner brackets with glow trace on hover.

#hover #transform #shadow

Live preview Hover

Glitch Corner Frame

Corners glitch and shift on hover.

#hover #animation #transform

Live preview Hover

Magnetic Pull Frame

Frame magnetically follows the cursor on hover.

#hover #transform #shadow

Live preview Hover

Metallic Sheen Frame

Metallic gradient sheen sweeps the frame on hover.

#hover #animation #gradient

Live preview Hover

Sticker Lift Frame

Sticker-style frame lifts and peels on hover.

#hover #transform #border

Live preview Hover

Halo Ring

A glowing halo ring expands on hover.

#hover #transform #shadow

Live preview Hover

Zoom Frame Thumbnail

The artwork scales up inside a fixed frame while an inset border draws itself in.

#hover #gradient #transform

Live preview Hover

Magnetic Button

Button translates toward the cursor for a magnetic pull feel.

#gradient #hover #shadow

Live preview Hover

Mosaic Tile Flip

A 3x3 grid of small tiles flips in 3D in a staggered wave on hover.

#gradient #hover #3d

Live preview Hover

Pixel Grid Light

A fine grid of pixel dots lights up across the panel on hover.

#gradient #hover #shadow

Live preview Hover

Reflection Glass

Frosted glass reflection on hover.

#hover #gradient #transform

Live preview Hover

Rotate 3D Crate

Crate lid swings open on hover.

#hover #transform #border

Live preview Hover

Stars Burst

Tiny stars burst outward on hover.

#hover #animation #transform

Live preview Hover

Vanish

Content vanishes into a blur haze while a smoke cloud puffs outward on hover.

#gradient #hover #border

Live preview Loaders

Antenna Signal

Antenna with signal waves.

#animation #transform #border

Live preview Loaders

Barometer

Barometer dial with needle.

#animation #gradient #transform

Live preview Loaders

Chainsaw

Chainsaw chain speeding around the guide bar.

#animation #gradient #border

Live preview Loaders

Dart Throw Flight

Dart flying toward board.

#animation #gradient #transform

Live preview Loaders

Deflector Shield

Deflector shield bubble pulsing around ship.

#animation #gradient #transform

Live preview Loaders

Drum Stick

Drum stick bouncing on a snare drum head.

#animation #gradient #transform

Live preview Loaders

Fax Feed

Paper scrolling through a fax machine slot.

#animation #gradient #transform

Live preview Loaders

Floppy Disk

Floppy diskette sliding in and out of a drive slot.

#animation #gradient #border

Live preview Loaders

Force Field

Force field hexagon pattern glowing.

#animation #gradient #transform

Live preview Loaders

Gauge Needle

Gauge needle bouncing.

#animation #gradient #transform

Live preview Loaders

Gradient Ring

A smooth gradient ring spinner with a fading tail, iOS-style.

#gradient #animation #border

Live preview Loaders

Hygrometer

Hygrometer showing humidity level.

#animation #gradient #transform

Live preview Loaders

Lava Lamp

Orange blobs rising and morphing inside a warm yellow lava lamp.

#gradient #animation #shadow

Live preview Loaders

Pretzel Twist

Pretzel with twisting arms.

#animation #transform #border

Live preview Loaders

Prevailing Wind

Prevailing wind direction arrows.

#animation #border

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.

#animation #gradient #transform

Live preview Loaders

Sextant

Sextant arc with swinging arm.

#animation #transform #border

Live preview Loaders

Tape Measure

Tape measure extending and retracting its yellow ribbon.

#animation #gradient #border

Live preview Loaders

Track Lane

Runner sprinting around an athletics track oval.

#animation #gradient #shadow

Live preview Loaders

Trampoline Bounce

A pink ball bouncing on a cyan trampoline surface that flexes on impact.

#gradient #animation #shadow

Live preview Loaders

Triangle Stack

Nested triangles rotating opposite.

#animation #transform #border

Live preview Loaders

Vortex Spiral

Four nested purple rings spiraling inward and fading to nothing.

#animation #border #transform

Live preview Navigation

Circle Hamburger

Hamburger inside a circle that morphs on hover.

#hover #transform #border

Live preview Navigation

Flip Hamburger

Hamburger that flips on Y axis.

#hover #transform #border

Live preview Navigation

Spin Hamburger

Hamburger that spins 180 degrees on hover.

#hover #transform #border

Live preview Navigation

To Close Hamburger

Hamburger that becomes an X close icon on hover.

#hover #transform #border

Live preview Navigation

To Minus Hamburger

Hamburger that becomes a minus line on hover.

#hover #transform #border

Live preview Navigation

To Plus Hamburger

Hamburger that becomes a plus sign on hover.

#hover #transform #border

Live preview Navigation

Fuzzy Match Palette

Command palette that highlights matched letters in the query string.

#hover #border

Live preview Navigation

Chevron Outline Breadcrumbs

Breadcrumbs with outlined chevron shapes.

#hover #border

Live preview Navigation

Dashed Trail Breadcrumbs

Breadcrumbs with dashed connecting lines.

#hover #transform #border

Live preview Navigation

Neon Separator Breadcrumbs

Dark mode breadcrumbs with neon separators.

#hover #transform #shadow

Live preview Navigation

Triangle Tip Breadcrumbs

Breadcrumbs with triangle pointed tips.

#hover #gradient #transform

Live preview Navigation

Dark Minimal Navbar

Minimal dark navbar with subtle hover underlines.

#hover #transform #border

Live preview Navigation

Fixed Edge Drawer Navbar

Drawer fixed to the viewport edge with a sharp vertical layout.

#hover #transform #border

Live preview Navigation

Glass Panel Drawer Navbar

Drawer with frosted glass panel styling over a colored background.

#hover #shadow #border

Live preview Navigation

Gradient Panel Drawer Navbar

Drawer with a gradient panel background and active indicator.

#hover #gradient #border

Live preview Navigation

Light Panel Drawer Navbar

Light panel drawer with clean card-style spacing.

#hover #shadow #border

Live preview Navigation

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

#hover #animation #border

Live preview Navigation

Push Content Right Drawer Navbar

Right drawer pushes the main content leftward when opening.

#hover #animation #border

Live preview Navigation

Rounded Pill Drawer Navbar

Drawer with rounded pill-style links and soft pink palette.

#hover #border

Live preview Navigation

Sticky Side Drawer Navbar

Sticky left drawer that stays in place during scroll.

#hover #transform #shadow

Live preview Navigation

Tree Nested Drawer Navbar

Vertical drawer with nested tree-style sub-links indentation.

#hover #border

Live preview Navigation

Glass Dark Navbar

Dark glass navbar with white border highlight.

#hover #shadow #border

Live preview Navigation

Glass Tint Navbar

Glass navbar with colored tint overlay.

#hover #gradient #shadow

Live preview Navigation

3D Icon Nav

3D extruded icon navigation.

#hover #gradient #transform

Live preview Navigation

3D Pagination

Pagination with 3D extruded active button.

#hover #transform #shadow

Live preview Navigation

Active Glow Pagination

Active page has glowing aura.

#hover #shadow #border

Popular tags