Hairline Border
also known as1px border · thin border · hairline divider
A 1px-or-thinner border at very low opacity, used to separate UI elements without visual weight.
A hairline border is a 1px (or sub-pixel on retina) divider drawn at 5–12% opacity of the foreground color. It's the modern alternative to drop shadows for separating cards, sections, and rows — it adds structure without adding visual weight.
The technique is foundational to Swiss-style UI, modern editorial sites, and most premium SaaS products built since ~2020. Linear, Vercel, Stripe, and Notion all rely on hairlines as their primary structural device.
- Card and section dividers in minimal UIs
- Tables and lists where shadows would feel heavy
- Anywhere you want structure without weight
- Brutalist or maximalist designs that need bold borders
- Print contexts where 1px may not render reliably
- +Use rgba/oklch with alpha (e.g. rgba(15,23,42,0.08))
- +Match border opacity between dark and light modes by adjusting alpha
- −Don't combine hairlines with strong shadows — pick one structural device
- −Don't make hairlines pure black — they'll feel harsh
Textbook examples in the directory
Precise dark surface with a faint 32px hairline grid baked into the canvas. Geist-class sans, JetBrains Mono, one desaturated violet accent. The primary CTA carries a 1px violet underline as its only chromatic mark.
Light dev-tool. Bone canvas with a 1px graphite hairline grid, mono-forward labels, one signal-violet accent. The aesthetic of an API console — built for developer-facing platforms that ship a light theme.
Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere.
People also ask
What opacity should a hairline border use?
5–8% on light backgrounds, 8–14% on dark. Always use alpha rather than a flat gray — alpha adapts to whatever surface sits behind it.