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

Skew Right

Tooltip skews open from the right side of the trigger.

#hover #transform #border

Live preview Tooltips

Slate Stone

Cool slate-gray tooltip with a stone-like matte finish.

#hover #transform #border

Live preview Tooltips

Slide Down Bottom

Tooltip slides down from the trigger on hover.

#hover #transform #border

Live preview Tooltips

Slide Diagonal Top-Left

Tooltip slides in from the top-left corner of the trigger.

#hover #transform #border

Live preview Tooltips

Slide Diagonal Top-Right

Tooltip slides in from the top-right corner of the trigger.

#hover #transform #border

Live preview Tooltips

Slide Fade Top

Tooltip slides down from above while fading in.

#hover #transform #border

Live preview Tooltips

Slide Left

Tooltip slides in from the right toward the left side.

#hover #transform #border

Live preview Tooltips

Side Slide Tooltip

The hint slides out from behind the trigger toward the right edge.

#hover #transform #border

Live preview Tooltips

Slide Up Top

Tooltip slides up from the trigger on hover.

#hover #transform #border

Live preview Tooltips

Spaceship Launch

Spaceship launch tooltip with rocket-trail gradient.

#hover #gradient #transform

Live preview Tooltips

Speech Bubble Bottom

Cartoon speech bubble tooltip with tail below the trigger.

#hover #transform #border

Live preview Tooltips

Speech Bubble Left

Cartoon speech bubble tooltip with tail on the left side.

#hover #transform #border

Live preview Tooltips

Speech Bubble Right

Cartoon speech bubble tooltip with tail on the right side.

#hover #transform #border

Live preview Tooltips

Spinner Tip

Spinner loader tooltip above the trigger.

#hover #animation #transform

Live preview Tooltips

Spiral Tip

Tooltip that spirals into view above the trigger.

#hover #animation #transform

Live preview Tooltips

Spring Back

Tooltip that springs back into place with overshoot.

#hover #transform #border

Live preview Tooltips

Spring Bloom

Soft pastel spring-bloom tooltip with floral hints.

#hover #gradient #transform

Live preview Tooltips

Spring Left

Elastic spring tooltip that overshoots in from the left.

#hover #transform #border

Live preview Tooltips

Spring Right

Elastic spring tooltip that overshoots in from the right.

#hover #transform #border

Live preview Tooltips

Sprint Card

Sprint card tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Stack Flip

Tooltip that flips from a stack above the trigger.

#hover #transform #shadow

Live preview Tooltips

Stamp Imprint

Tooltip styled like an ink stamp imprint.

#hover #transform #border

Live preview Tooltips

Stamp Press

Tooltip pressed like a stamp above the trigger.

#hover #transform #shadow

Live preview Tooltips

Star Clip

Tooltip reveals from a star shape above the trigger.

#hover #transform #border

Live preview Tooltips

Stat Display

Statistics display tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Static TV

Tooltip shows TV static before content above the trigger.

#hover #animation #gradient

Live preview Tooltips

Status Busy

Busy status tooltip with red dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Strike Through

Tooltip with animated strike-through drawing above the trigger.

#hover #transform #border

Live preview Tooltips

Diagonal Stripe Background

Tooltip with diagonal candy-stripe background pattern.

#hover #gradient #transform

Live preview Tooltips

Horizontal Stripe Background

Tooltip with horizontal candy-stripe background pattern.

#hover #gradient #transform

Live preview Tooltips

Vertical Stripe Background

Tooltip with vertical candy-stripe background pattern.

#hover #gradient #transform

Live preview Tooltips

Success Toast

Toast-style success tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Summer Sun

Bright summer-sun tooltip with warm yellow glow.

#hover #gradient #transform

Live preview Tooltips

Sun Flare

Sun flare tooltip with bright golden radiating glow.

#hover #gradient #transform

Live preview Tooltips

Sunrise Glow

Warm sunrise gradient tooltip with golden glow.

#hover #gradient #transform

Live preview Tooltips

Sunset Gradient

Warm sunset gradient tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Teal Glass

Teal frosted glass tooltip with blur above the trigger.

#hover #transform #shadow

Live preview Tooltips

Terminal Amber

Amber CRT terminal tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Terminal Green

Classic green terminal tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Terminal Output

Terminal output style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Terracotta Clay

Earthy terracotta tooltip with a textured clay feel.

#hover #gradient #transform

Live preview Tooltips

Thanksgiving Leaf

Autumn leaf-styled Thanksgiving tooltip.

#hover #gradient #transform

Live preview Tooltips

Thunder Electric

Electric thunder yellow tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Thunderstorm Night

Dark stormy night tooltip with electric lightning accent.

#hover #gradient #transform

Live preview Tooltips

Tick Marks Left

Tooltip with tick-mark decorations along its left edge.

#hover #gradient #transform

Live preview Tooltips

Tick Marks Right

Tooltip with tick-mark decorations along its right edge.

#hover #gradient #transform

Live preview Tooltips

Tick Marks Top

Tooltip with tick-mark decorations along its top edge.

#hover #gradient #transform

Live preview Tooltips

Ticket Stub

Tooltip styled like a raffle ticket stub above the trigger.

#hover #gradient #transform

Live preview Tooltips

Top Left Corner

Tooltip appears at the top-left corner of the trigger.

#hover #transform #border

Live preview Tooltips

Top Right Corner

Tooltip appears at the top-right corner of the trigger.

#hover #transform #border

Live preview Tooltips

Topaz Yellow

Topaz yellow gem tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Toxic Waste

Toxic green ooze tooltip with neon glow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Turquoise Sea

Bright turquoise tooltip reminiscent of clear sea water.

#hover #transform #shadow

Live preview Tooltips

Typewriter Fast

Fast typewriter tooltip above the trigger.

#hover #animation #transform

Live preview Tooltips

Typewriter Top

Tooltip text types itself out character by character.

#hover #animation #transform

Live preview Tooltips

Typing Cursor

Tooltip text types out with a blinking cursor above the trigger.

#hover #animation #transform

Live preview Tooltips

Unblur Out

Tooltip starts sharp and unblurs to focus above the trigger.

#hover #transform #border

Live preview Tooltips

Underline Draw

Tooltip with animated underline drawing above the trigger.

#hover #gradient #transform

Live preview Tooltips

User Card

User card tooltip with avatar and details above the trigger.

#hover #gradient #transform

Live preview Tooltips

Vaporwave Tip

Vaporwave pink-cyan gradient tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Version Tag

Version tag tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Vibrate Buzz

Tooltip that vibrates with a subtle buzz on hover.

#hover #animation #transform

Live preview Tooltips

Vintage Postage

Vintage postage stamp tooltip with perforated edges.

#hover #transform #shadow

Live preview Tooltips

Violet Dream

Soft violet dreamy tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Volcano Erupt

Volcano-erupt tooltip with molten red-orange glow.

#hover #gradient #transform

Live preview Tooltips

Watercolor

Watercolor paint tooltip with soft edges above the trigger.

#hover #gradient #transform

Live preview Tooltips

Wave Pattern Background

Tooltip with a wavy background pattern.

#hover #gradient #transform

Live preview Tooltips

Wave Tip

Tooltip that waves into view above the trigger.

#hover #animation #transform

Live preview Tooltips

Winter Snowflake

Frosty winter-snowflake tooltip with cool blue tones.

#hover #gradient #transform

Live preview Tooltips

Wobble Top

Tooltip wobbles side to side before settling above the trigger.

#hover #animation #transform

Live preview Tooltips

Wood Grain

Wood-grain texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Word Stagger

Tooltip words stagger into view above the trigger.

#hover #transform #border

Live preview Tooltips

Yellow Sticky

Yellow sticky note tooltip with shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Zigzag Pattern Background

Tooltip with a zigzag background pattern.

#hover #gradient #transform

Live preview Tooltips

Zoom Blur Combo

Tooltip that combines zoom-in with a blur-to-focus transition.

#hover #transform #border

Live preview Tooltips

Zoom In Bottom

Tooltip zooms in from small to full size below the trigger.

#hover #transform #border

Live preview Tooltips

Zoom In Left

Tooltip zooms in from small to full size on the left.

#hover #transform #border

Live preview Tooltips

Zoom In Top

Tooltip zooms in from far away above the trigger.

#hover #transform #border

Live preview Tooltips

Zoom On Hover

Tooltip that zooms larger on hover above the trigger.

#hover #animation #transform

Live preview Tooltips

Zoom Out Bottom

Tooltip zooms out from oversized to normal below the trigger.

#hover #transform #border

Live preview Tooltips

Zoom Out Left

Tooltip zooms out from oversized to normal on the left.

#hover #transform #border

Live preview Timelines

Basalt Checked Timeline

Finished basalt steps fill in with a tick while the connector to the last one stays dashed.

#border #transition #list

Live preview Timelines

Caliper Calibration Log

Calibration entries pin the measured value between two caliper jaws with the drift beside.

#border #list #measure

Live preview Timelines

Cascade Contract Stages

Signed contract stages get a tilted double ring stamp, the open one stays dashed.

#stamp #border #list

Live preview Timelines

Chassis Order Stages

Every production stage sits inside a bracketed frame that lights up when hovered.

#border #hover #cards

Live preview Timelines

Cobalt Arrow Timeline

Cobalt chevrons point from one stage down to the next in place of a solid rail.

#transform #border #list

Live preview Timelines

Copper Badge Timeline

Every entry hangs off a copper pill badge that carries its month right on the rail.

#border #shadow #list

Live preview Timelines

Dynamo Backup History

Snapshot cylinders chain downward with dashed links and the full run leads the set.

#border #list #backup

Live preview Timelines

Garnet Split Timeline

Dates sit left of the garnet rail and the matching notes line up on the right.

#grid #layout #border

Live preview Timelines

Kindle Streak Timeline

A habit streak drawn as interlocking chain links where the newest one keeps flickering warm.

#animation #border #habit

Live preview Timelines

Lapis Card Timeline

Each lapis entry opens into a compact card carrying a heading and a status chip.

#card #border #shadow

Live preview Timelines

Onyx Ring Timeline

Hollow onyx rings mark every step and the running one spins a dashed halo.

#border #animation #list

Live preview Timelines

Orbit Sprint Cycle

Four sprint ceremonies sit around a dashed ring while a bead keeps orbiting them.

#animation #layout #border

Live preview Timelines

Pearl Icon Timeline

Three pearl markers change shape along one rail: disc, diamond and arrow head.

#border #transform #shapes

Effects tagged #border

Popular tags