The Separator Block: A Divider Line That Actually Matches Your Design

A horizontal divider you can style — solid, dashed, dotted or double, any width and thickness, aligned where you want and coloured to match your theme.

That default horizontal line never quite fits.

You need a break between two sections — a line. The built-in divider is one style, one grey, full width, take it or leave it. Want it shorter, centred, in your brand colour, or a touch bolder? That’s a trip into custom CSS, and the value you pick never quite lines up with the rest of the page.

The Separator block turns that line into something you actually control. Drop it in, and every part of it — style, width, thickness, alignment and colour — is a control in the sidebar, with its own value for desktop, tablet and phone.

Four line styles — solid, dashed, dotted or double — so the divider fits the mood of the page.
Set the width and where it sits — a short accent line centred under a heading, or a full-width rule aligned left, centre or right.
Pick the thickness per device — a barely-there hairline or a bold bar, and thinner on phones if you want.
Give it a light and dark colour so the line matches your palette in both modes — plus spacing above and below.

Setting it up takes seconds. Drop the Separator in, pick a style, drag the width and thickness, choose an alignment and a colour — the line updates in the preview as you go. No CSS, no theme file, no guessing at pixel values.

See it working

Every line below is a real Separator block — same block, four different settings. Watch how the style, width, thickness and alignment change the feel of the break.

Solid, full width. The classic rule — a clean line straight across to close one section and open the next.


Dashed, short and centred. A narrow accent line under a heading, in your brand colour, centred on the page.


Dotted, full width, hairline. The lightest possible break — a thin dotted line that separates without shouting.


Double, short, left-aligned, bold. A heavier two-line rule pinned to the left, for a section opener with more weight.


A small block that keeps a page tidy

A divider is a small thing, but it sets the rhythm of a page — where one idea ends and the next begins. Because the Separator carries its own width, thickness, style and colour, you can reuse one look across a whole site and every break feels deliberate instead of default.

Draw the line where you want it

The Separator block ships with Flexa Block. Install it, and a divider you can actually style is waiting in the editor the next time you open a page.

More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found