How to Add Horizontal Lines between Sections to Your Squarespace Website

Are you looking to add a touch of professionalism to your Squarespace website? A horizontal line between sections is a simple yet effective way to do so. You may have noticed this design element on various websites, including our own.

A horizontal line can help break up content, particularly on minimalist websites, and give it a more editorial look. Plus, adding to your website it can give it a polished and professional appearance without much effort.

To achieve this design element, follow our guide below. It's a straightforward process, and if you want to tweak the style of the line, we've included instructions at the end to help you achieve the desired look.

Ready to get started? Head to your Design > Custom CSS and copy and paste the CSS codes we've provided. It's that simple.

Horizontal lines between sections

This code will add horizontal lines between each section on every page

/* HORIZONTAL LINES BETWEEN SECTIONS */
.page-section {
  border-bottom: 1px solid #000;
}

Position

By default, the above code will place the lines throughout your entire website. If you want to only display on specific pages or sections, use the Squarespace ID Finder Google Chrome extension to find the Block ID for the section or Data Section ID for the page ID.

Here is an example of a block ID: #block-1c64c49338a2b66a91

Here is an example of a Data Section ID: section[data-section-id="23107a66a42c4d4ac755f91d"]

/* HORIZONTAL LINES FOR MULTIPLE SECTIONS */
#block-a93efe917463274888e3, #block-8d46e1779da72e8eb32d, #block-eda794d91dab83f02c9
body { 
border:1px solid black;
}

/* HORIZONTAL LINES FOR SPECIFIC PAGE */
section[data-section-id="ADD ID HERE"]
body { 
border:1px solid black;
}

Customise the lines

The above codes are what we have used to create the lines and borders on our Squarespace website but you can easily edit the code to suit your design.

Line thickness

To change the line thickness, edit the px number, increase the number for a thicker line and decrease it for a thinner line. For example, if you wish for a thicker line, change to 2px.

Line Style

To style the line style, change out Solid for the look you want.

solid - Use for a solid line

dotted - Use for a dotted line

dashed - Use for a dashed line

double - Use for a double line

Line Colour

To change the line colour, change out #000 for the colour you want.

WANT TO SAVE THIS TUTORIAL? PIN IT TO PINTEREST!