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

Top Border Tabs

Tabs with active top border indicator.

#hover #border

Live preview Navigation

Underline Grow Tabs

Tabs with underline that grows from left on active.

#hover #border

Live preview Navigation

Connector Line Treeview

Tree menu with L-shaped connector lines linking parents to children.

#hover #transform #border

Live preview Navigation

Vertical Tab Right Arrow Pointer

Vertical tabs with a right-pointing arrow on the active item.

#hover #transform #border

Live preview Navigation

Vertical Tab Left Border Active

Vertical tabs with a glowing left border on the active item.

#hover #shadow #border

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

#hover #animation #transform

Live preview Navigation

Vertical Tab Square Sharp

Sharp square vertical tabs with brutalist styling.

#hover #transform #border

Live preview Tabs

Caliper Region Tabs

A pair of caliper jaws slides along the bar and grips the active region.

#transform #border #monospace

Live preview Tabs

Forge Numbered Tabs

Each tab carries a numbered disc that turns white hot when it is opened.

#gradient #animation #border

Live preview Tabs

Monsoon Two Column Panel Tabs

The panel is split in two: a rainfall figure on the left, the reading on the right.

#layout #animation #border

Live preview Tabs

Tundra Theme Picker Tabs

Swatch tabs repaint the preview card below instead of swapping its content.

#theme #color #border

Live preview Text

Embossed Text

Subtly embossed text with a light top edge and dark bottom edge for depth.

#shadow #border

Live preview Text

Typewriter Line

Characters appear one step at a time behind a blinking block cursor.

#animation #border #typewriter

Live preview Tooltips

Dashed Arrow Left

Tooltip to the left of the trigger with a dashed connector.

#hover #transform #border

Live preview Tooltips

Double Arrow Left

Tooltip with stacked double-chevron arrow pointing right.

#hover #transform #border

Live preview Tooltips

Double Arrow Right

Tooltip with stacked double-chevron arrow pointing left.

#hover #transform #border

Live preview Tooltips

Triangle Arrow Top

Tooltip with prominent triangle arrow above the trigger.

#hover #transform #border

Live preview Tooltips

Aurora Borealis

Northern-lights aurora borealis gradient tooltip.

#hover #gradient #transform

Live preview Tooltips

BG Mesh

Tooltip with mesh gradient background above the trigger.

#hover #gradient #transform

Live preview Tooltips

BG Radial

Tooltip background radiates from center above the trigger.

#hover #gradient #transform

Live preview Tooltips

Blinds Open

Tooltip reveals like venetian blinds opening above the trigger.

#hover #transform #border

Live preview Tooltips

Book Page

Book page tooltip with double-page book styling.

#hover #transform #shadow

Live preview Tooltips

Branch Name

Git branch name tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Burnt Orange Glow

Warm burnt orange tooltip with a soft ambient glow.

#hover #transform #shadow

Live preview Tooltips

Carbon Fiber

Carbon fiber weave texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Char Flip

Tooltip characters flip in sequence above the trigger.

#hover #transform #border

Live preview Tooltips

Circle Mask Right

Tooltip reveals via an expanding circle mask from the right.

#hover #transform #border

Live preview Tooltips

Code Line Numbers

Tooltip with line-numbered code above the trigger.

#hover #transform #shadow

Live preview Tooltips

Comet Tail

Comet tail tooltip with trailing gradient streak.

#hover #gradient #transform

Live preview Tooltips

Coral Sunset Pink

Warm coral-to-pink gradient tooltip evoking a sunset.

#hover #gradient #transform

Live preview Tooltips

Crystal Spark

Crystal-like sparkling tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Curtain Left

Tooltip reveals like a curtain opening to the left.

#hover #transform #border

Live preview Tooltips

Cyber Grid

Cyberpunk grid pattern tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Dashed Border Bottom

Tooltip with a dashed border below the trigger.

#hover #transform #border

Live preview Tooltips

Dashed Border Right

Tooltip with a dashed border on the right side.

#hover #transform #border

Live preview Tooltips

Date Picker

Date picker style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Deep Teal Pool

Teal tooltip with a subtle aqua gradient pool effect.

#hover #gradient #transform

Live preview Tooltips

Denim Fabric

Denim fabric texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Discrete Transition Tooltip

The bubble animates in from display none using allow-discrete and @starting-style.

#hover #transform #border

Live preview Tooltips

Dotted Border Right

Tooltip with a dotted border on the right side.

#hover #transform #border

Live preview Tooltips

Double Frame Bottom

Tooltip with an outer double-frame border below the trigger.

#hover #transform #shadow

Live preview Tooltips

Double Frame Top

Tooltip with an outer double-frame border above the trigger.

#hover #transform #shadow

Live preview Tooltips

Error Stack

Error stack trace style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Fade Right

Tooltip fades in on the right side pointing left.

#hover #transform #border

Live preview Tooltips

Fan Out Tip

Tooltip that fans out from a point above the trigger.

#hover #transform #border

Live preview Tooltips

Feature Card

Feature highlight card tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Flash Strobe

Tooltip that flashes with a strobe-like opacity animation.

#hover #animation #transform

Live preview Tooltips

Flip X Left

3D flip tooltip on X axis revealing from the left.

#hover #transform #border

Live preview Tooltips

Flip X Right

3D flip tooltip on X axis revealing from the right.

#hover #transform #border

Live preview Tooltips

Glass Frost Cold

Cool-toned frosted glass tooltip with cold blue tint.

#hover #transform #shadow

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

Inset Border Top

Tooltip with an inset 3D border 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

Milestone

Milestone tag tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Mojito Mint

Fresh mojito mint tooltip with lime accent above the trigger.

#hover #gradient #transform

Live preview Tooltips

Mustard Field

Rich mustard yellow tooltip with a vintage field feel.

#hover #transform #border

Live preview Tooltips

Neumorphic Top

Soft neumorphic tooltip with inset shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Obsidian Black

Obsidian black glassy tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Ocean Wave

Ocean blue gradient tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Olive Military

Olive-drab military-styled tooltip with stencil feel.

#hover #transform #border

Live preview Tooltips

Orbit Circles

Tooltip with orbiting circles decoration above the trigger.

#hover #animation #transform

Live preview Tooltips

Pastel Soft

Soft pastel tooltip with gentle colors above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pearl White

Pearl white shimmering tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Pencil Sketch

Pencil sketch style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pink Bubble

Pink bubble tooltip with rounded corners above the trigger.

#hover #transform #shadow

Live preview Tooltips

Powder Sky

Soft powder-blue tooltip reminiscent of a clear sky.

#hover #transform #shadow

Live preview Tooltips

Progress Bar

Tooltip with animated progress bar above the trigger.

#hover #gradient #transform

Live preview Tooltips

Progress Circular

Tooltip with circular progress indicator above the trigger.

#hover #animation #transform

Live preview Tooltips

Progress Ring

Circular progress ring tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Pulse Throb

Tooltip that throbs with a gentle pulse animation on hover.

#hover #animation #transform

Live preview Tooltips

Rich Content

Tooltip with rich multi-line content above the trigger.

#hover #transform #shadow

Live preview Tooltips

Ridge Border Bottom

Tooltip with a 3D ridged border below the trigger.

#hover #transform #border

Live preview Tooltips

Robot Circuit

Robot circuit tooltip with PCB-style green-and-cyan grid.

#hover #gradient #transform

Live preview Tooltips

Rotate Left

Tooltip rotates in from the left with a spin animation.

#hover #transform #border

Live preview Tooltips

Rotate In Top

Tooltip rotates into place above the trigger.

#hover #transform #border

Live preview Tooltips

Scale In Left

Tooltip scales in from the left of the trigger.

#hover #transform #border

Live preview Tooltips

Pop Scale Tooltip

The bubble springs open from the trigger with a slight overshoot before settling.

#hover #transform #border

Live preview Tooltips

Shimmer Wave

Tooltip with a shimmering wave gradient sweeping across.

#hover #animation #gradient

Live preview Tooltips

Shutter Diagonal

Tooltip reveals through a diagonal shutter wipe.

#hover #transform #border

Live preview Tooltips

Silver Metallic

Silver metallic tooltip with subtle gradient above the trigger.

#hover #gradient #transform

Live preview Tooltips

Skew Top

Tooltip skews into place above the trigger.

#hover #transform #border

Live preview Tooltips

Slide Diagonal Bottom-Left

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

#hover #transform #border

Live preview Tooltips

Slide Right

Tooltip slides in from the left toward the right side.

#hover #transform #border

Live preview Tooltips

Spotlight Radial

Tooltip with a radial spotlight gradient highlighting its center.

#hover #gradient #transform

Live preview Tooltips

Spring Top

Tooltip bounces with a spring overshoot above the trigger.

#hover #transform #border

Live preview Tooltips

St Patrick Clover

Lucky green St Patrick's Day clover tooltip.

#hover #gradient #transform

Live preview Tooltips

Status Away

Away status tooltip with yellow dot above the trigger.

#hover #transform #shadow

Popular tags