Skip to content
UX Atlas
Plate FND·047 · UI foundationGrid C1 · Rev. 2026-08-14

Borders and Dividers

Lines that separate, which should be the second choice after space rather than the first.

UI foundationCraft conventionFoundational

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.

On this plate
  1. 1Definition
  2. 2Space first, then line
  3. 3Rules for using them well
  4. 4When a line is the right answer
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Designing lists, tables and forms.
  • Reviewing a layout that feels heavy.

Common mistakes

  • Rules on every row of a long list.
  • Borderless inputs.
  • Dividers used where spacing would be quieter.
  • Using a decorative border weight on form controls, where the boundary has a contrast requirement to meet.

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.

When a line is the right answer

SituationLine or spaceWhy
Separating list itemsSpace firstLines add visual noise proportional to row count
Marking an input boundaryLineThe control boundary is functional and needs 3:1 contrast
Grouping form sectionsSpace, or a headingA border makes the group look like a container
Table row separationA faint lineRows must be tracked horizontally across many columns
Distinguishing a surfaceBackground changeA tint separates without adding a shape
Focus indicationLine, plus offsetIt must be visible against both the control and the background

In practice

  1. i.

    Dividers replaced by spacing

    Settings pages

    A 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.

  2. ii.

    The input that lost its edge

    Functional boundaries

    Borderless inputs on a tinted background looked clean and left several readers unable to tell where a field began. A control boundary is information, and it has a contrast requirement that decoration does not.

Local chart

FND·047 · Region II · Grid C1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Data TableCMP·025 · APPLIED THROUGHText InputCMP·003 · APPLIED THROUGHCommon RegionFND·006 · RELATED CONCEPTContrastFND·002 · RELATED CONCEPTNeutralsFND·025 · RELATED CONCEPTProximityFND·004 · RELATED CONCEPTShapeFND·046 · RELATED CONCEPTSpacing SystemsFND·042 · RELATED CONCEPTWhitespaceFND·015 · RELATED CONCEPT

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

A Data TableAn Enterprise WorkflowSettings

Applied through

Where this shows up as a concrete interface decision.

Related concept

Connected closely enough to change how you apply this.