Border Components

Comprehensive border styles, effects, and utilities for modern web design

Basic Borders

Essential border styles, widths, and utilities for clean design systems

Basic Borders

Essential border styles, widths, and utilities for clean design systems

Border Widths

Standard Border Widths

Different border width options for various design needs

1px

border

2px

border-2

4px

border-4

8px

border-8

Border Styles

Border Style Variations

Different border styles including solid, dashed, and dotted

Solid
border-solid
Dashed
border-dashed
Dotted
border-dotted

Border Colors

Color Variations

Semantic and utility border colors for different contexts

Gray

Blue

Green

Yellow

Red

Purple

Border Radius

Corner Rounding Options

Different border radius values for various design approaches

None

Small

Default

Medium

Large

Full

Directional Borders

Single Side Borders

Individual border sides for accent lines and dividers

Top
border-t-4
Right
border-r-4
Bottom
border-b-4
Left
border-l-4

Practical Examples

Real-World Applications

Common border patterns used in modern web design

Information Card

Left accent border with matching background color for information display.

Warning Alert

Full border with rounded corners for alert components.

Content separated by a subtle top border divider.

Dashed border for stronger visual separation.

Interactive Borders

Dynamic border effects that respond to user interactions and state changes

Interactive Borders

Dynamic border effects that respond to user interactions and state changes

Hover Border Effects

Border Animations on Hover

Borders that change color, width, or style when hovered

Color Change

Hover to change border color

Width Change

Hover to increase border width

Style Change

Hover to change border style

Glow Effect

Hover for border glow

Scale + Border

Hover to scale with border

Gradient Border

Hover to change gradient

Focus Border States

Input Focus Indicators

Border states for form inputs and interactive elements

Button Focus States

Selection & Active States

Interactive Selection Borders

Borders that indicate selection, active states, and user choices

Selectable Cards

Option 1

Click to select

Option 2

Click to select

Option 3

Click to select

Toggle Border States

Animated Border Effects

CSS Animation Borders

Borders with continuous animations and dynamic effects

Rotating Border

Continuous rotation

Pulsing Border

Opacity animation

Bouncing Border

Bounce animation

Gradient Animation

Moving gradient border

Draw Border

Hover to draw

Neon Glow

Glowing effect

Interactive Border Patterns

Complex Interactive Borders

Advanced border patterns with multiple interaction states

Reveal Border

Hover to reveal animated border

Fill Border

Hover to fill with gradient

Multi-State Border

Different colors for hover, focus, and active states

Advanced Borders

Complex border effects with gradients, patterns, and advanced CSS techniques

Advanced Borders

Complex border effects with gradients, patterns, and advanced CSS techniques

Gradient Border Effects

Advanced Gradient Borders

Complex gradient border implementations using modern CSS techniques

Linear Gradient

Purple to red gradient

Radial Gradient

Circular gradient border

Conic Gradient

360° color wheel

Spinning Gradient

Rotating effect

Multi-Layer

Layered gradients

Glassmorphism

Frosted glass effect

Pattern & Texture Borders

Border Patterns & Textures

Creative border patterns using CSS gradients and background images

Striped Border

Diagonal stripes

Dotted Pattern

Circular dots

Geometric

Triangle pattern

Wave Pattern

Flowing waves

Circuit Board

Tech grid pattern

Noise Texture

Textured overlay

3D & Shadow Border Effects

Dimensional Border Effects

Three-dimensional appearances and advanced shadow techniques

Embossed

Inset shadow effect

Raised

Elevated appearance

Neon Glow

Glowing neon effect

Multi-Shadow

Layered shadows

Bevel Effect

3D bevel border

Neumorphism

Soft 3D effect

Interactive Advanced Effects

Mouse-Responsive Border Effects

Borders that respond to mouse position and user interaction

Mouse-Following Glow

Mouse Glow Effect

Move your mouse around this area

Proximity Detection

Card 1

Hover to activate

Card 2

Hover to activate

Card 3

Hover to activate

Morphing Border Shapes

Liquid Border Animation

Liquid Border Effect

Click to activate liquid animation