Contents

Thickness

How heavy the divider's line is, from a hairline to a band.

Where to find it
Labelled Thickness in the "Selected Component" section of the Modify drawer.
Offered by
The Divider component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

This is how many pixels tall the line is. The choices run from 1 pixel — a hairline, and the default — up to 8, which is thick enough to read as a bar of colour rather than a rule.

Thicker is not clearer. A hairline in a colour that contrasts with the background separates two sections perfectly well, and it does so without competing with the content on either side of it. Weight is worth spending only when the divider is doing real work: marking the top of a footer, or standing in for a section heading that is not there.

The one case where thickness genuinely helps legibility is a dashed or dotted line, whose strokes are too small to register at a single pixel.

What each option does

OptionWhat you will see
1pxA hairline. The default, and the right answer most of the time.
2pxSlightly heavier. Enough to make a dashed line readable.
3pxClearly deliberate rather than incidental.
4pxA strong rule, usually paired with a shortened Width as an accent.
8pxA band of colour rather than a line.

When you would use it

  • Leaving it at 1px, which is right for almost every divider.
  • Raising it to 2px or 3px so a dashed or dotted line is actually visible.
  • Using 4px or 8px as a deliberate accent — a short, coloured rule under a heading.

How to change it

  1. Click the divider on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Thickness".
  3. Choose a weight from 1px to 8px.
  4. Uncheck "Same value for all resolutions" to use a lighter line on phones.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • A thick divider across the full width of a page reads as an interruption. If you want 4px or more, shorten it with Width on the column so it reads as an accent instead.
  • Thickness does not add space around the divider. Use Margin on the column, or the row's Gap, to give it room.
  • Setting Border on the column overrides this, and applies to all four sides rather than the top.

Related settings

Where to go next