#border CSS effects

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

Live preview Hover

Border Dash March

Dashed border marches around on hover.

#hover #animation #border

Live preview Hover

Color Swap Fast

Foreground and background colors swap on hover.

#hover #transform #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 Card

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

#gradient #hover #3d

Live preview Hover

Metallic Sheen Frame

Metallic gradient sheen sweeps the frame on hover.

#hover #animation #gradient

Live preview Loaders

Black Hole

A swirling multicolor accretion disk being consumed by a dark core.

#gradient #animation #shadow

Live preview Loaders

Dart Throw Flight

Dart flying toward board.

#animation #gradient #transform

Live preview Loaders

Elevator

Elevator car rising and falling inside its shaft.

#animation #gradient #border

Live preview Loaders

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

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

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

#hover #animation #border

Live preview Navigation

3D Icon Nav

3D extruded icon navigation.

#hover #gradient #transform

Live preview Navigation

Underline Segmented Control

Segmented control with an underline indicator that slides between items.

#hover #transform #border

Live preview Navigation

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

#hover #transform #shadow

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Glass Iridescent

Iridescent glass tooltip with a rainbow shimmer overlay.

#hover #gradient #transform

Live preview Tooltips

Green Success

Green success tooltip with checkmark styling above the trigger.

#hover #transform #shadow

Live preview Tooltips

Groove Border Top

Tooltip with a 3D grooved border above the trigger.

#hover #transform #border

Live preview Tooltips

Icon Help

Tooltip with question mark icon above the trigger.

#hover #transform #border

Live preview Tooltips

Light Top

Clean light tooltip with subtle shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Liquid Ripple

Tooltip that ripples outward like a water drop impact.

#hover #transform #border

Live preview Tooltips

Mojito Mint

Fresh mojito mint tooltip with lime accent above the trigger.

#hover #gradient #transform

Live preview Tooltips

Mono Dark

Monospace dark tooltip with terminal feel above the trigger.

#hover #transform #border

Live preview Tooltips

Pulse Throb

Tooltip that throbs with a gentle pulse animation on hover.

#hover #animation #transform

Live preview Tooltips

Rotate Left

Tooltip rotates in from the left with a spin animation.

#hover #transform #border

Live preview Tooltips

Shimmer Wave

Tooltip with a shimmering wave gradient sweeping across.

#hover #animation #gradient

Live preview Tooltips

Status Away

Away status tooltip with yellow dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Status Online

Online status tooltip with green dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Time Stamp

Timestamp tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Zig Zag

Tooltip that zigzags into view above the trigger.

#hover #animation #transform

Live preview Badges

Common Badge

Common achievement badge with gray gradient.

#gradient #transform #shadow

Live preview Badges

Epic Badge

Epic achievement badge with purple gradient.

#gradient #transform #shadow

Live preview Badges

Honor Badge

Badge of honor with deep purple and gold trim.

#transform #shadow #border

Live preview Badges

Mastery Badge

Mastery achievement badge with elite styling.

#transform #shadow #border

Live preview Badges

Milestone Badge

Milestone achievement badge with celebratory styling.

#gradient #shadow #border

Live preview Badges

Rare Badge

Rare achievement badge with blue gradient.

#gradient #transform #shadow

Live preview Badges

Star Achievement

Star achievement badge for completion recognition.

#shadow #border

Live preview Badges

Trophy Achievement

Trophy-style achievement badge with golden shine.

#gradient #shadow #border

Live preview Badges

Action Archive Badge

Archive action badge with box glyph and amber tone.

#gradient #shadow #border

Live preview Badges

Action Delete Badge

Delete action badge with red destructive styling.

#gradient #shadow #border

Live preview Badges

Action Download Badge

Download action badge with down-arrow glyph and indigo tone.

#gradient #shadow #border

Live preview Badges

Action Edit Badge

Edit action badge with pencil glyph and blue accent.

#gradient #shadow #border

Live preview Badges

Action Email Badge

Email action badge with envelope glyph and rose tone.

#gradient #shadow #border

Live preview Badges

Action Print Badge

Print action badge with printer glyph and zinc tone.

#gradient #shadow #border

Live preview Badges

Action Save Badge

Save action badge with floppy-disk glyph and green tone.

#gradient #shadow #border

Live preview Badges

Action Upload Badge

Upload action badge with up-arrow glyph and sky-blue tone.

#gradient #shadow #border

Live preview Badges

Critical Alert Badge

Critical alert badge with pulsing red animation.

#animation #transform #shadow

Live preview Badges

Danger Alert Badge

Critical danger alert badge with strong red.

#transform #shadow #border

Live preview Badges

Error Alert Badge

Red error alert badge with warning style.

#shadow #border

Live preview Badges

Info Alert Badge

Blue info alert badge for general notifications.

#shadow #border

Live preview Badges

Notice Badge

Neutral notice badge in slate color.

#border

Live preview Badges

Warning Alert Badge

Yellow warning alert badge.

#shadow #border

Live preview Badges

Glitch Badge

Badge with cyberpunk glitch effect.

#animation #transform #shadow

Live preview Badges

Double Ring Pulse Badge

Badge with two expanding ring pulses staggered.

#animation #transform #border

Live preview Badges

Pulse Ring Badge

Badge with expanding ring pulses around it.

#animation #transform #border

Live preview Badges

Typewriter Badge

Badge with text appearing like a typewriter.

#animation #border

Live preview Badges

Typing Dots Badge

Badge with three typing indicator dots.

#animation #transform #border

Live preview Badges

Caret Typing Badge

Badge with blinking caret like terminal input.

#animation #border

Live preview Badges

Three Dots Loading Badge

Badge with three pulsing loading dots.

#animation #transform #border

Live preview Badges

Arctic Aurora Badge

Aurora-borealis gradient badge with shifting green-violet haze.

#animation #gradient #shadow

Live preview Badges

Arctic Ice Badge

Icy white-blue badge with crystalline chill.

#gradient #shadow #border

Live preview Badges

Arctic Snow Badge

Snowy white badge with subtle flake speckles.

#gradient #shadow #border

Live preview Badges

Art Deco Badge

Art deco badge with gold geometric pattern.

#gradient #transform #border

Live preview Badges

Award Ribbon

Award ribbon medal with two hanging tails.

#gradient #transform #shadow

Live preview Badges

Beta Dot Badge

Subtle beta badge with a small status dot indicator.

#animation #border

Live preview Badges

Bronze Metallic Badge

Bronze metallic badge with warm copper gradient.

#gradient #shadow #border

Live preview Badges

Brutalist Black Badge

Brutalist badge with sharp edges and offset shadow.

#transform #shadow #border

Live preview Badges

Brutalist Cyan Badge

Brutalist cyan badge with sharp offset shadow.

#transform #shadow #border

Live preview Badges

Double Brutalist Badge

Brutalist badge with double offset shadows.

#transform #shadow #border

Live preview Badges

Brutalist Green Badge

Brutalist green badge with bold offset shadow.

#transform #shadow #border

Live preview Badges

Brutalist Orange Badge

Brutalist orange badge with stark black border.

#transform #shadow #border

Live preview Badges

Brutalist Outline Badge

Brutalist badge with transparent body and thick outline.

#transform #shadow #border

Live preview Badges

Brutalist Pink Badge

Brutalist pink badge with offset shadow.

#transform #shadow #border

Live preview Badges

Brutalist Yellow Badge

Brutalist yellow badge with thick border and offset shadow.

#transform #shadow #border

Live preview Badges

Candy Cane Badge

Candy-cane badge with diagonal red-white stripes.

#gradient #shadow #border

Live preview Badges

Candy Cupcake Badge

Cupcake badge with frosting-pink swirl and gold sprinkles.

#gradient #shadow #border

Live preview Badges

Candy Gummy Badge

Translucent gummy bear-style badge with jelly glow.

#shadow #border #filter

Live preview Badges

Candy Lollipop Badge

Lollipop badge with spiral swirl pattern.

#gradient #shadow #border

Live preview Badges

Candy Marshmallow Badge

Puffy white marshmallow badge with soft shadow.

#gradient #shadow #border

Live preview Badges

Cave Crystal Badge

Faceted crystal badge with diamond-cut shimmer.

#gradient #shadow #border

Live preview Badges

Cave Stalactite Badge

Sharp stalactite-shaped badge with pointed bottom edge.

#gradient #border

Live preview Badges

Dismissible Chip

Material-style chip with X dismiss button.

#hover #border

Live preview Badges

Cloud AWS Badge

AWS cloud badge with orange-to-dark gradient and Squidward.

#gradient #shadow #border

Live preview Badges

Cloud Azure Badge

Microsoft Azure badge with blue A-triangle styling.

#gradient #shadow #border

Live preview Badges

Cloud Cloudflare Badge

Cloudflare cloud badge with orange-flame styling.

#gradient #shadow #border

Live preview Badges

Cloud DigitalOcean Badge

DigitalOcean cloud badge with blue-curve wave styling.

#gradient #shadow #border

Live preview Badges

Cloud Fly Badge

Fly.io cloud badge with red-magenta fly styling.

#gradient #shadow #border

Live preview Badges

Cloud GCP Badge

Google Cloud Platform badge with four-color split styling.

#gradient #shadow #border

Live preview Badges

Cloud Heroku Badge

Heroku cloud badge with purple-paper plane styling.

#gradient #shadow #border

Live preview Badges

Cloud Netlify Badge

Netlify cloud badge with teal-teal gradient styling.

#gradient #shadow #border

Popular tags