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

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Cards

Bronze Achievement Card

Bronze-tier achievement with progress and reward.

#gradient #shadow #border

Live preview Checkboxes

Power On Toggle

A power-symbol checkbox that glows green when powered on, dark when off.

#shadow #border #transform

Live preview Buttons

Alpine Peak

Snow-capped alpine mountain button.

#hover #gradient #shadow

Live preview Cards

Alarm Card

Alarm card with a clock face, set time, and toggle indicator.

#gradient #transform #shadow

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Live preview Cards

Character Sheet Card

RPG character sheet card with stats, class, and level.

#gradient #shadow #border

Live preview Tooltips

3D Fold Origami

Tooltip that unfolds in 3D like an origami paper fold.

#hover #transform #border

Live preview Hover

3D Parallax Tilt

Layers shift in 3D based on cursor position for a parallax depth effect.

#gradient #3d #shadow

Live preview Navigation

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

#hover #animation #shadow

Live preview Tooltips

3D Cube Spin

Tooltip that spins in 3D like a tumbling cube above the trigger.

#hover #transform #border

Live preview Badges

Action Copy Badge

Copy action badge with duplicate-page glyph and slate tone.

#gradient #shadow #border

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Live preview Forms

Blur Background Input

Input that blurs the surrounding area on focus.

#border #filter

Live preview Forms

Midnight Background Input

Deep midnight blue gradient background.

#gradient #shadow #border

Live preview Forms

Bottom Only Border Input

Minimalist input with only a bottom border that thickens on focus.

#shadow #border

Live preview Hover

Aperture Iris Close

A dark circular iris contracts over the panel like a camera aperture closing on hover.

#gradient #hover #border

Live preview Hover

Blink Swap

Content blinks rapidly and swaps text on each blink cycle on hover.

#animation #hover #border

Live preview Toggles

Bit Flip

Binary bit flips between 0 and 1 in monospace green.

#transform #shadow #border

Live preview Badges

Ripple Badge

Badge with expanding ripple waves.

#animation #transform #border

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

#animation #gradient #transform

Live preview Buttons

Violet Storm

Deep violet button with lightning flicker.

#animation #gradient #shadow

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

#hover #gradient #shadow

Live preview Cards

Beer Flight Card

Beer flight card with sample glasses and ABV range.

#gradient #shadow #border

Live preview Cards

Beer Pair Tips Card

Beer pairing tips card with beer style, dish pairing, and reasoning.

#gradient #shadow #border

Live preview Checkboxes

Circle Stroke Draw

An SVG circle outline draws itself around a center dot that pops in when checked.

#border #transform #rotate

Live preview Forms

Glassmorphism Input

Frosted glass input with backdrop blur and translucent border.

#shadow #border #filter

Live preview Loaders

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

#hover #transform #border

Live preview Tooltips

Charcoal Noir

Near-black charcoal tooltip with a film-noir mood.

#hover #transform #shadow

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Live preview Badges

Success Alert Badge

Green success alert badge.

#shadow #border

Live preview Badges

Certified Ribbon Badge

Certified badge styled like an official ribbon stamp.

#transform #shadow #border

Live preview Badges

Soft Pulse FX Badge

Animated badge with gentle soft-pulse scale animation.

#animation #gradient #transform

Live preview Badges

Halloween Holiday Badge

Halloween-themed badge with orange and black.

#transform #shadow #border

Live preview Badges

Platform Web Badge

Web platform badge with browser-globe accent and blue tone.

#gradient #shadow #border

Live preview Badges

Admin Role Badge

Admin role badge with red shield style.

#transform #shadow #border

Live preview Badges

Y2K Bubble Badge

Glossy pink bubble badge with translucent highlight.

#gradient #shadow #border

Live preview Backgrounds

Gentle Snowfall

Soft white snowflakes drift down across a winter night sky.

#gradient #animation #border

Live preview Backgrounds

Traffic Lights

Traffic lights cycle through red yellow and green.

#animation #gradient #transform

Live preview Buttons

Acorn Cap

Brown acorn with cap-textured top.

#hover #gradient #shadow

Live preview Buttons

Acorn Shell

Acorn-brown button with a glossy cap shell.

#hover #gradient #shadow

Live preview Buttons

Aerospace Panel

Industrial aerospace metal panel with rivets.

#hover #gradient #transform

Live preview Buttons

Almond Cream

Soft almond-cream with brown speckle.

#hover #gradient #transform

Live preview Buttons

Amber Haze

Golden amber button with a hazy outer glow.

#hover #gradient #transform

Live preview Buttons

Andromeda

Andromeda-galaxy button with spiral star arms.

#hover #gradient #transform

Live preview Buttons

Anodized Aluminum

Colorful anodized aluminum with smooth surface.

#hover #gradient #shadow

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

#hover #gradient #shadow

Live preview Buttons

Aquamarine Sea

Pale aquamarine sea-gem with clear facets.

#hover #gradient #transform

Live preview Buttons

Arc Welder Button

Industrial button with an electric arc tracing its top edge.

#hover #animation #transform

Live preview Buttons

Dahlia Bloom

Layered dahlia petals in deep magenta.

#hover #gradient #transform

Live preview Buttons

Frame Border Button

Photo-frame button with a double-line inset border on hover.

#hover #shadow #border

Live preview Buttons

Graphite Pencil

Dark graphite pencil-tip sheen.

#hover #gradient #shadow

Live preview Buttons

Honeydew Fresh

Pale honeydew melon green button.

#hover #gradient #transform

Live preview Buttons

Jetty

Jetty-button with stone breakwater pattern.

#hover #gradient #shadow

Live preview Buttons

Magenta Hot Pulse

Vivid magenta button with a throbbing pulse.

#hover #animation #transform

Live preview Buttons

Moonlight Glow

Pale blue moon-kissed button with halo.

#hover #gradient #shadow

Live preview Buttons

Obelisk

Tall obelisk button with a tapered pyramid top.

#hover #gradient #shadow

Live preview Buttons

Platinum Edge

Polished platinum button with sharp edge.

#hover #gradient #transform

Live preview Buttons

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

#animation #hover #shadow

Live preview Buttons

Trailblazer

Bright orange trailblaze with motion lines.

#animation #gradient #transform

Live preview Cards

Archer Card

Archer card with bow icon and accuracy stat.

#gradient #shadow #border

Live preview Cards

Coffee Passport

Coffee passport card with stamp grid, roast notes, and a bean icon.

#gradient #transform #shadow

Live preview Cards

Cruise Port Card

Cruise port card with arrival time, pier, and shore excursions.

#gradient #shadow #border

Live preview Cards

Estimate Card

Service estimate card with breakdown and labor hours.

#shadow #border

Live preview Cards

Country Fair Ticket

Rustic country fair ticket with kraft paper, gingham accent, and prize ribbon.

#gradient #shadow #border

Live preview Cards

Friend Request Card

Friend request card with avatar, mutual friends, and buttons.

#gradient #shadow #border

Live preview Cards

GoFundMe Donate Cause Card

Donation campaign card with cause, raised amount, and donate action.

#gradient #shadow #border

Live preview Cards

Guest List Card

Exclusive guest list card with check marks and plus-one indicator.

#gradient #shadow #border

Live preview Cards

Merry-Go-Round Card

Carousel ride card with horse icon and ride duration.

#gradient #shadow #border

Live preview Cards

Molecule Card

Molecule card with formula, bonds, and structure name.

#gradient #transform #shadow

Live preview Cards

Pet Vaccination Card

Pet vaccination record with vaccine name, date, and next due.

#shadow #border

Live preview Cards

9-Ball Pool Card

9-ball pool rack card with ball order and breaker.

#gradient #shadow #border

Live preview Cards

Student ID

Student ID card with a portrait, university header, and a barcode strip.

#gradient #shadow #border

Live preview Cards

Teacher Profile Bio Card

Teacher bio card with avatar, name, subject, and contact info.

#gradient #shadow #border

Live preview Cards

Workout Split Day Card

Weekly workout split showing day focus and exercise list.

#gradient #shadow #border

Live preview Checkboxes

Plum Color Toggle

A color swatch that fills with plum when checked.

#transform #shadow #border

Live preview Checkboxes

Cosmic Ray Beam

A high-energy cosmic ray beam shoots through the box when checked.

#animation #gradient #transform

Live preview Checkboxes

3D Y-Axis Flip

A 3D flip on the Y axis revealing a checkmark on the back face.

#transform #border #3d

Live preview Checkboxes

Sparkle Twinkle

A four-pointed sparkle that twinkles in with a magenta glow and slow spin when checked.

#animation #shadow #border

Live preview Forms

Frosted Glass Input

Heavy frost effect with crystalline texture overlay.

#shadow #border #filter

Live preview Forms

Full Border Draw Input

Border draws itself around the input clockwise when focused.

#border

Live preview Forms

Ice Border Input

Icy frosted border with crystalline shimmer.

#shadow #border

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

Icon Background Search

Search bar with icon in a colored background square.

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

Popular tags