When designing your Squarespace website, sometimes you just need a simple way to separate sections of content. A horizontal line (or divider) is perfect for breaking up text, improving readability, and adding a clean design element.

A common mistake is thinking you need custom CSS to add a line in Squarespace, but that’s not the case. Squarespace makes it easy with a built-in Line Block, and you can fully customize its look to match your site’s style.

In this tutorial, I’ll show you exactly how to add and style a horizontal line in Squarespace,no coding required.

Why Use a Horizontal Line in Squarespace?

Horizontal lines (also called dividers or rules) can:

Break up long blocks of text for better readability.
Create visual separation between different content sections.
Add balance and structure to your website design.
Make your site look more professional and polished.

*Want a framework for designing the perfect homepage?*

Access now

Need an expert to build your Squarespace website?

Book a free kick-off call with our team to discuss your project requirements in detail.

Schedule a call

Step 1: Add a Line Block in Squarespace

Navigate to the page where you want the line.
Click Edit.
Click the + icon to add a new block.
Select the Line Block from the block menu.

A horizontal line will appear right on your page.

Step 2: Adjust the Line Width and Placement

Resize the line: Drag the edges of the line block to adjust its width.
Full-width line: Stretch the block all the way to both sides of the page.
Spacing: Move the line block between text sections or content areas to get the spacing just right.

Step 3: Style Your Line

You can fully customize your line’s look using Squarespace’s Site Styles:

Go to Site Styles.
Select Colors.
Find the Line Block settings.
Change the color to match your brand palette.
Adjust the opacity for a subtle or bold look.

Step 4: Check on Mobile

Always preview your line on mobile devices:

Switch to Mobile View in the editor.
Ensure the line stretches evenly across the screen.
Adjust spacing if needed so it looks consistent.

Now you’ll have a clean, customizable horizontal line that helps separate sections of your website content,all without writing a single line of CSS.

Wrapping Up

Adding a horizontal line in Squarespace is quick, easy, and doesn’t require custom code. With the built-in Line Block, you can separate content, improve readability, and give your site a polished, professional design.