Live preview Navigation
#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
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Keyboard Command Palette
Command palette where each item shows its keyboard shortcut hint.
Live preview Navigation
Modal Command Palette
Floating command palette styled like a modal dialog with section header.
Live preview Navigation
Search Command Palette
Command palette with a search input and filtered command rows.
Live preview Navigation
Coupon Clip Corner Nav
Nav items styled as coupons with clipped circular corners.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
3D Perspective Drawer Navbar
Drawer with a 3D perspective active link lifting forward.
Live preview Navigation
Brutalist Block Drawer Navbar
Drawer with raw brutalist block styling, sharp borders, and offset shadow.
Live preview Navigation
Cascading Multi Drawer Navbar
Multi-level cascading drawer with progressively indented levels.
Live preview Navigation
Live preview Navigation
Floating Overlay Drawer Navbar
Floating drawer that overlays content without pushing it.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Pinned Side Drawer Navbar
Pinned left-side drawer that persists beside the main content.
Live preview Navigation
3D Left Drawer Navbar
Left drawer with 3D perspective slide revealing main nav beside it.
Live preview Navigation
Live preview Navigation
Square Sharp Drawer Navbar
Drawer with sharp square corners and bold contrast.
Live preview Navigation
Fading Dropdown Menu
The submenu drops a few pixels and fades in, staying open while the pointer is inside.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Glassmorphism Navbar
Frosted glass navbar with backdrop blur and translucent background.
Live preview Navigation
Gradient Border Navbar
Navbar with animated gradient border around active link.
Live preview Navigation
Has-Selector Active Nav
Selecting a radio marks the item active and shifts the whole bar accent with :has().
Live preview Navigation
Live preview Navigation
Live preview Navigation
Iris Aperture Zoom Nav
Iris aperture that zooms open to reveal nav links in the center.
Live preview Navigation
Live preview Navigation
3D Perspective Modal Navbar
Modal nav that flies in from depth using perspective translateZ.
Live preview Navigation
Blurred Backdrop Modal Navbar
Centered modal nav over a heavily blurred colored backdrop.
Live preview Navigation
3D Flip In Modal Navbar
Centered modal nav that flips in on the Y axis with 3D depth.
Live preview Navigation
Fullscreen Modal Cover Navbar
Fullscreen modal cover with large centered nav links.
Live preview Navigation
Glass Popup Modal Navbar
Glassmorphism modal popup nav with frosted translucent surface.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
OKLCH Menu Bar
Bar, hover and active layers are three color-mix steps off a single OKLCH accent.
Live preview Navigation
Planet Rotation Menu
Center sun with planet items rotating around it on a continuous orbit path.
Live preview Navigation
Solar System Menu
Solar system layout with planets on concentric orbit rings of different speeds.
Live preview Navigation
Dark Blurred Overlay Navbar
Dark overlay with heavy backdrop blur covering the page content.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Pill Highlight Nav
A rounded highlight sits behind the hovered item and scales in from its centre.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Glow Trail Step Nav
Stepper with a glowing trail line that pulses along the active path.
Live preview Navigation
Progress Ring Tracker Nav
Vertical step tracker with circular progress rings on each milestone.
Live preview Navigation
Vertical Timeline Nav
Timeline nav with a center spine and milestone dots that activate on hover.
Live preview Navigation
Ribbon Banner Curl Nav
Active ribbon banner with a curled corner peeling up on hover.
Live preview Navigation
Live preview Navigation
Glow Segmented Control
Dark segmented control with a neon glow on the active segment.
Live preview Navigation
Bottom Sheet Navbar
Mobile bottom sheet that slides up to reveal nav links.
Live preview Navigation
Back Arrow Sheet Navbar
Sheet with a back arrow navigation button at the top.
Live preview Navigation
Live preview Navigation
Left Slide Sheet Navbar
Vertical sheet sliding in from the left with stacked links.
Live preview Navigation
Right Slide Sheet Navbar
Vertical sheet sliding in from the right with profile-style links.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Split Horizontal Divider Navbar
Nav links separated by horizontal lines stacked vertically.
Live preview Navigation