Live preview Forms
#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 Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Cyber Border Input
Cyberpunk-style input with glowing magenta-cyan corner accents.
Live preview Forms
Animated Dashes Border
Input with a dashed border that marches around on focus.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Glow Pulse Border Input
Border glow pulses outward in expanding rings on focus.
Live preview Forms
Live preview Forms
Gradient Border Input
Input wrapped with an animated gradient border using padding box trick.
Live preview Forms
Live preview Forms
Live preview Forms
Pulse Border Input
Border softly pulses with a colored glow when input is focused.
Live preview Forms
Rotating Gradient Border
Conic gradient border rotates around the input continuously.
Live preview Forms
Shimmer Border Input
Border has a traveling shimmer light effect on focus.
Live preview Forms
Live preview Forms
Live preview Forms
Trace Border Input
A glowing trace light travels around the input border on focus.
Live preview Forms
Animated Underline Border
Bottom underline grows from center outward on focus.
Live preview Forms
Animated Arrow Dropdown
Dropdown with arrow indicator that rotates when focused.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Floating Label Dropdown
Dropdown with floating label that animates when focused.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Multi-Select Chip Dropdown
Multi-select dropdown with chips for selected items.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
3D Flip Floating Label
Label performs a 3D flip rotation when the input receives focus.
Live preview Forms
Amber Accent Floating Label
Warm amber-accented floating label input for cozy forms.
Live preview Forms
Bordered Floating Label
Material outline where label sits on the border when active.
Live preview Forms
Bounce Floating Label
Label bounces up with an elastic spring when input is focused.
Live preview Forms
Corner Floating Label
Label slides to the top-left corner when input is focused.
Live preview Forms
Double Border Floating Label
Input with a double border that animates on focus, label lifts above.
Live preview Forms
Elastic Floating Label
Label elastically springs up with multiple bounces.
Live preview Forms
Live preview Forms
Glow Floating Label
Input glows softly with a label that lifts and adopts the glow color.
Live preview Forms
Gradient Text Floating Label
Label takes on an animated gradient color when input is focused.
Live preview Forms
Floating Label Field
The placeholder lifts into a small label above the field once anything is typed.
Live preview Forms
Material Design Input
Pure Material Design floating label with ripple-like underline.
Live preview Forms
Outline Draw Floating Label
Border outline draws itself around the input as label floats up.
Live preview Forms
Live preview Forms
Floating Label Scale
Label scales down and slides up with a smooth springy motion.
Live preview Forms
Shadow Floating Label
Label lifts with a long soft shadow trailing behind it.
Live preview Forms
Slide Left Floating Label
Label slides left then up when input receives focus.
Live preview Forms
Draw Underline Floating Label
Material-style input with an underline that draws itself in on focus.
Live preview Forms
Has-Selector Validation
The wrapper turns red only after a value is entered and fails, thanks to :has().