Border
A line drawn around the edge of an element to define its boundary.
Plain English
Borders define where one element ends and another begins. A well-designed border system is barely visible — 1px, low contrast — acting as a structural guide rather than a decorative statement. Borders have tremendous leverage: on a light surface they separate items cleanly without shadows; on a dark surface they can be done with opacity so they adapt to any background colour. The wrong border — too thick, too dark, or too many of them — makes an interface feel heavy and dated.
Technical
The border shorthand sets width, style, and colour (e.g. border: 1px solid #E2E8F0). Individual sides: border-top, -right, -bottom, -left. For a border only on one side: border-bottom: 1px solid. For semi-transparent borders: border-color: rgb(0 0 0 / 0.08). Borders increase the element's rendered size unless box-sizing: border-box is set. Outline is similar but does not affect layout — prefer outline for focus rings.
Live Demo
No border
Shadow-only card — modern, no dividing line
1px ink-200
Standard card border — light, structural
2px accent (active)
Selected or active state
1px transparent (dark)
Dark surface border — opacity-based
Borders and shadows are interchangeable tools for surface definition.
Usage
✓ Good usage
Use 1px solid ink-200 borders on cards in a list to separate items cleanly without shadows, creating a flat, data-dense layout.
✗ Bad usage
Adding 2px solid black borders to every component in the UI — heavy borders dominate visually and make the interface feel like a wireframe.
Recommended values
- 1px solid — standard border weight for cards, inputs, dividers
- 2px solid — active/selected state border
- Colour: ink-200 (#E2E8F0) — light backgrounds
- Colour: rgb(255 255 255 / 0.10) — dark surfaces (opacity-based)
- No border + shadow — alternative to border for floating cards
- Border-bottom only — separator between list items or table rows
Common mistakes
- Too-dark borders that draw the eye away from content.
- Inconsistent border widths (some 1px, some 2px, some 0) without semantic purpose.
- Using border to create focus rings — use outline + outline-offset instead.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use 1px solid #E2E8F0 borders on all cards and inputs. On dark surfaces, use border: 1px solid rgb(255 255 255 / 0.08). Active/selected states upgrade to 2px solid accent colour. No borders on buttons — use background colour to define them.