Skip to content
All Answers
Layout

How do I add a divider line between sections in Squarespace?

Add a top border to sections to create a divider line. Use the ::before pseudo-element for more control over the divider's width and position.

A centered divider that's narrower than the full width looks more refined than an edge-to-edge line. Use margin: auto on the pseudo-element to center it.

/* Simple full-width divider */
.page-section + .page-section {
  border-top: 1px solid #e0e0e0 !important;
}

/* Centered short divider */
.page-section + .page-section::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: #e63946;
  margin: 0 auto;
  position: relative;
  top: -2px;
}
Design section dividers with our Section Builder toolTry it free →

Related Questions

Layout

How do I change the section padding in Squarespace?

Layout

How do I make a section full width in Squarespace?

Layout

How do I hide a section on mobile in Squarespace?

Layout

How do I center content vertically in a Squarespace section?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →