border CSS Effects — 3995 Free Examples (Page 29)

Live preview Checkboxes

Shooting Star Trail

A star shoots across the box leaving a glowing trail when checked.

#animation #gradient #border

Live preview Checkboxes

Venetian Blind Checkbox

Four horizontal slats rotate shut one after another to darken the panel.

#transform #3d #border

Live preview Checkboxes

Slide-In Checkmark

The checkmark slides in from the left and settles into place when checked.

#border #transform #rotate

Live preview Checkboxes

Slide Fill Checkbox

Colour wipes in from the left edge of the box and the tick fades in behind it.

#gradient #transform #border

Live preview Checkboxes

Spring Coil Checkbox

A coiled spring compresses under load and the plate settles down onto it.

#gradient #transform #border

Live preview Checkboxes

Stardust Trail Toggle

A trail of golden stardust sparkles around the box when checked.

#animation #gradient #transform

Live preview Checkboxes

Starting Style Checkbox

The control animates in from below on first paint using the starting-style rule.

#transform #border #starting-style

Live preview Checkboxes

Stroke Draw Checkmark

A minimal square that draws an SVG checkmark with a dash-offset stroke animation when checked.

#border #css

Live preview Checkboxes

Supernova Burst Toggle

A star bursts outward with radial particles when checked.

#animation #transform #shadow

Live preview Checkboxes

Tally Mark Checkbox

Four upright strokes appear in order and a fifth crosses them diagonally.

#transform #border #tally

Live preview Checkboxes

Tape Strike Checkbox

Ticking a task draws a strike line across the label and dims the whole row.

#transform #border #todo

Live preview Checkboxes

Fabric Texture Toggle

A woven fabric texture in red when checked.

#gradient #transform #shadow

Live preview Checkboxes

Leather Texture Toggle

A brown leather pebbled texture when checked.

#gradient #transform #shadow

Live preview Checkboxes

Marble Texture Toggle

A white marble veined texture when checked.

#gradient #transform #shadow

Live preview Checkboxes

Metal Texture Toggle

A brushed metal texture with silver shine when checked.

#gradient #transform #shadow

Live preview Checkboxes

Paper Texture Toggle

A cream paper texture with subtle grain when checked.

#gradient #transform #shadow

Live preview Checkboxes

Sand Texture Toggle

A sandy tan texture with grain when checked.

#gradient #transform #shadow

Live preview Checkboxes

Stone Texture Toggle

A stone-textured box that solidifies gray when checked.

#gradient #transform #shadow

Live preview Checkboxes

Water Texture Toggle

A rippling water texture in blue when checked.

#gradient #transform #shadow

Live preview Checkboxes

Wood Texture Toggle

A wood-textured box that warms to brown when checked.

#gradient #transform #shadow

Live preview Checkboxes

Tick Cross Morph

An X mark morphs into a checkmark with a color shift from red to green when checked.

#border #transform #rotate

Live preview Checkboxes

Topaz Golden Gem

A golden topaz gem shimmers with warm light when checked.

#gradient #shadow #border

Live preview Checkboxes

Triangle Play Mark

A triangle play-icon shape that fills with violet and scales in when checked.

#shadow #border #transform

Live preview Checkboxes

Turquoise Stone Toggle

A turquoise stone with webbed matrix lights up when checked.

#gradient #shadow #border

Live preview Checkboxes

Uranus Ice Giant

A pale cyan ice giant tilted sideways when checked.

#gradient #transform #shadow

Live preview Checkboxes

Venus Golden Clouds

A warm yellow-orange Venus glows with thick clouds when checked.

#gradient #transform #shadow

Live preview Checkboxes

X Mark Toggle

A square that reveals a red X mark when toggled on — the inverse of a checkmark.

#border #transform #rotate

Live preview Checkboxes

Zodiac Sign Toggle

A zodiac wheel spins and highlights when checked.

#transform #shadow #border

Live preview Forms

Aurora Background Input

Northern lights aurora gradient background for the input.

#animation #gradient #shadow

Live preview Forms

Card Style Input

Elevated card-like input with shadow and rounded corners.

#shadow #border

Live preview Forms

Cream Background Input

Warm cream-colored input with brown text.

#shadow #border

Live preview Forms

Cyberpunk Background Input

Cyberpunk neon city background with grid floor.

#gradient #shadow #border

Live preview Forms

Dark Themed Input

Sleek dark-themed input with subtle inner glow.

#shadow #border

Live preview Forms

Embossed Input

Embossed stone-textured input with deep shadow.

#shadow #border

Live preview Forms

Forest Background Input

Deep forest green gradient background.

#gradient #shadow #border

Live preview Forms

Grid Background Input

Tech grid pattern background with glowing focus.

#gradient #shadow #border

Live preview Forms

Lava Background Input

Hot lava gradient with crackling orange glow.

#animation #gradient #shadow

Live preview Forms

Light Themed Input

Bright clean light-themed input.

#shadow #border

Live preview Forms

Mesh Gradient Background

Animated multi-color mesh gradient that drifts.

#animation #gradient #shadow

Live preview Forms

Monochrome Background Input

Black and white monochrome input with high contrast.

#shadow #border

Live preview Forms

Noise Texture Input

Input with a subtle noise texture overlay for tactile feel.

#shadow #border

Live preview Forms

Ocean Background Input

Calm ocean blue gradient background.

#gradient #shadow #border

Live preview Forms

Paper Texture Input

Cream paper-textured input with subtle lines.

#gradient #shadow #border

Live preview Forms

Pattern Background Input

Decorative pattern background using CSS gradients.

#gradient #shadow #border

Live preview Forms

Sunset Background Input

Warm sunset gradient orange to pink background.

#gradient #shadow #border

Live preview Forms

Transparent Input

Borderless transparent input with bold underline.

#shadow #border

Live preview Forms

Vaporwave Background Input

Vaporwave pink-cyan gradient aesthetic.

#gradient #shadow #border

Live preview Forms

Beveled Border Input

Retro beveled border giving a 90s button look.

#shadow #border

Live preview Forms

Corner Brackets Border

Sci-fi style input framed by four animated corner brackets.

#shadow #border

Live preview Forms

Cyber Border Input

Cyberpunk-style input with glowing magenta-cyan corner accents.

#transform #shadow #border

Live preview Forms

Animated Dashes Border

Input with a dashed border that marches around on focus.

#animation #shadow #border

Live preview Forms

Dotted Border Input

Input with a dotted border that becomes solid on focus.

#shadow #border

Live preview Forms

Double Border Input

Input with a double border that subtly shifts on focus.

#shadow #border

Live preview Forms

Framed Border Input

Decorative frame border with corner ornaments.

#shadow #border

Live preview Forms

Glow Border Input

Simple input with a soft glow border that intensifies on focus.

#shadow #border

Live preview Forms

Glow Pulse Border Input

Border glow pulses outward in expanding rings on focus.

#animation #shadow #border

Live preview Forms

Glow Ring Border Input

Expanding glow ring radiates outward on focus.

#animation #shadow #border

Live preview Forms

Gradient Border Input

Input wrapped with an animated gradient border using padding box trick.

#animation #gradient #border

Live preview Forms

Neon Border Input

Cyberpunk-style neon-bordered input that pulses on focus.

#animation #shadow #border

Live preview Forms

Outset Border Input

Raised neumorphic outset border that sinks on focus.

#shadow #border

Live preview Forms

Pulse Border Input

Border softly pulses with a colored glow when input is focused.

#animation #shadow #border

Live preview Forms

Rotating Gradient Border

Conic gradient border rotates around the input continuously.

#animation #gradient #transform

Live preview Forms

Shimmer Border Input

Border has a traveling shimmer light effect on focus.

#animation #gradient #transform

Live preview Forms

Thick Border Input

Bold thick border that thins on focus for inverse effect.

#shadow #border

Live preview Forms

Thin Border Input

Ultra-thin elegant border that thickens subtly on focus.

#shadow #border

Live preview Forms

Trace Border Input

A glowing trace light travels around the input border on focus.

#animation #gradient #transform

Live preview Forms

Animated Underline Border

Bottom underline grows from center outward on focus.

#gradient #transform #border

Live preview Forms

Animated Arrow Dropdown

Dropdown with arrow indicator that rotates when focused.

#transform #shadow #border

Live preview Forms

Avatar Dropdown

User dropdown with avatar and profile menu.

#hover #gradient #transform

Live preview Forms

Bold Dropdown

Bold chunky dropdown with thick border and prominent text.

#shadow #border

Live preview Forms

Border Glow Dropdown

Dropdown with glowing border on focus state.

#shadow #border

Live preview Forms

Card Style Dropdown

Dropdown styled as elevated card with shadow.

#hover #transform #shadow

Live preview Forms

Clean Dropdown

Modern clean dropdown with custom arrow and subtle focus state.

#hover #shadow #border

Live preview Forms

Color Picker Dropdown

Dropdown with color swatches as options.

#hover #transform #border

Live preview Forms

Compact Dropdown

Smaller compact dropdown for tight UI spaces.

#shadow #border

Live preview Forms

Context Menu Dropdown

Right-click context menu style with action items.

#hover #shadow #border

Live preview Forms

Country Picker Dropdown

Country picker dropdown with flag emojis in options.

#shadow #border

Live preview Forms

Currency Dropdown

Currency picker with symbol prefix and clean styling.

#transform #shadow #border

Live preview Forms

Cyber Dropdown

Cyberpunk dropdown with angular clip-path shapes.

#shadow #border

Live preview Forms

Dark Dropdown

Dark themed dropdown with elevated focus state.

#hover #shadow #border

Live preview Forms

Fade Background Dropdown

Dropdown with smooth background fade on focus.

#gradient #shadow #border

Live preview Forms

Flip Arrow Dropdown

Dropdown with arrow that flips on focus in 3D.

#transform #shadow #border

Live preview Forms

Floating Label Dropdown

Dropdown with floating label that animates when focused.

#transform #shadow #border

Live preview Forms

Glass Dropdown

Frosted glass dropdown with backdrop blur and elegant feel.

#gradient #border #filter

Live preview Forms

Grouped Options Dropdown

Dropdown with optgroup for organized categorized options.

#shadow #border

Live preview Forms

Icon Dropdown

Dropdown with leading icon that lights up on focus.

#transform #shadow #border

Live preview Forms

Language Picker Dropdown

Language picker with code labels and globe icon.

#transform #shadow #border

Live preview Forms

Large Dropdown

Oversized dropdown for prominent form selections.

#shadow #border

Live preview Forms

Light Dropdown

Light theme dropdown with clean white background.

#hover #shadow #border

Live preview Forms

Material Dropdown

Material design dropdown with floating label accent.

#border

Live preview Forms

Menu Dropdown

Context menu dropdown with icon options.

#hover #transform #shadow

Live preview Forms

Minimal Dropdown

Bare minimum dropdown with thin border and tiny arrow.

#border

Live preview Forms

Modern Dropdown

Sleek modern dropdown with elevation and accent color.

#hover #shadow #border

Live preview Forms

Multi-Select Chip Dropdown

Multi-select dropdown with chips for selected items.

#hover #transform #shadow

Live preview Forms

Neon Dropdown

Cyberpunk neon dropdown with bright accent on focus.

#shadow #border

Live preview Forms

Outline Dropdown

Outline style dropdown with no fill background.

#hover #shadow #border

Effects tagged #border

Popular tags