Disclosure: Some links in this post are affiliate links. If you click through and pay for a product, I’ll be compensated at no cost to you.

How to add lines between sections in Squarespace

If you know me, you know I’m not typically a “trendy” designer - I like modern and minimal sites with design longevity. But every now and then, there’s a trend I want to hop on and try out.

Over the past few years, we’ve seen lines (or borders) make a comeback in web design. Today we’re seeing everything from thin 1 pixel tone-on-tone lines to chunky black lines.

In this post, I’ll show you how to add horizontal lines between sections in Squarespace using the CSS border property (and how to exclude a section).

Then I’ll show you how to add a line underneath your Squarespace site header without code.

Adding Horizontal Lines Between Squarespace Sections

The Goodtype.us site is a great example of a site using chunkier black lines between sections:

The Goodtype Squarespace website uses lines between sections as a design element

If you’d like to add that look to your site, it just takes pasting a little Custom CSS into Squarespace.

CSS for Squarespace Lines Between Sections

The code to add vertical lines between sections in Squarespace is pretty easy. You’d just add this to Custom CSS:

/* add lines between sections */
.page-section {
  border-bottom: 3px solid #000;
}

Next, you can play around with the border values:

Change up the 3px to a higher or lower number to make your lines heavier or thinner.
Instead of “solid” for a solid line you could use these alternatives for different looks:
- dotted
- dashed
- solid
- double
You can change up #000 (black) to any hex code color you’d like.

What if you want to exclude a particular section? You’d use this method to find the section ID and include it in this code:

/* add lines between sections, excluding YOUR SECTION NAME */
.page-section:not(section[data-section-id="YOURNUMBERHERE"]) {
  border-bottom: 3px solid #000;
}