Border Width

Defines the thickness of element borders, expressing UI hierarchy and visual separation.

Border Scale

5-step border width scale from 0px to 8px

border-0

0px

border-1

1px

border-2

2px

border-4

4px

border-8

8px

Visual Comparison

1px

border-1

2px

border-2

4px

border-4

8px

border-8

Use Cases

Recommended border widths for each context

Common patterns

Border Element

Card

border

1px

Input

border

1px

Focus

border-2

2px

Selected

border-2

2px

Accent

border-l-4

4px

Decorative

border-b-8

8px

Examples

Card border

border

border-2

Accent border

border-l-2 - Light emphasis

border-l-4 - Medium emphasis

border-l-8 - Strong emphasis

Status indicator

Success

Warning

Error

Info