Borders and Dividers
Lines that separate, which should be the second choice after space rather than the first.
Definition
Borders enclose an element; dividers separate adjacent content. Both add visual weight, so the first question is always whether spacing alone would do the job.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
Space first, then line
Most dividers in shipped interfaces are compensating for insufficient spacing. Increasing the gap groups and separates at once, and adds no marks. A line only separates.
Lines earn their place when space is unavailable, as in a dense table, or when the boundary itself carries information, as in a table header rule.
Rules for using them well
- Never put a border on both the top and the bottom of every row in a long list. Choose one edge and use it consistently.
- Borders that convey meaning, such as an input outline, need 3:1 contrast against their surroundings under WCAG 1.4.11.
- Purely decorative dividers can be much lower contrast, and usually should be.
- Keep the border colour in the neutral ramp so it belongs to the palette.
- One border weight per product, except where a heavier rule marks a genuine structural break.
In practice
Dividers replaced by spacing
Settings pagesA settings page with a rule under every row reads as a grid of cells. Removing most rules and increasing group spacing turns it into a set of labelled groups, which is what it actually is.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Applied through
Where this shows up as a concrete interface decision.
- Data TableComponent
- Text InputComponent
Related concept
Connected closely enough to change how you apply this.
- Common RegionUI foundation
- ContrastUI foundation
- NeutralsUI foundation
- ProximityUI foundation
- ShapeUI foundation
- Spacing SystemsUI foundation
- WhitespaceUI foundation