How to Use CSS to Add Lines Between Sections in Squarespace 7.1

When you’re designing a Squarespace 7.1 website, clean visual separation between sections can make a huge difference in readability and flow. While Squarespace offers built-in section dividers, many creators prefer a simple, minimalist line instead of a stylized shape. The good news? You can achieve this with a few lines of CSS.

In this post, I’ll walk you through several easy ways to add lines between sections—whether you want a classic thin divider, a dotted line, or something more custom.

---

1: Add a Line Between All Sections

1. Go to Design → Custom CSS in the Squarespace menu.

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

---

Customize the look

Thicker line

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

---

Dotted or dashed line

 // /* add dotted or dashed lines */
.page-section {
   border-top: 1px dashed #999;
}
                
        

---

 // /* add spacing around divider */
.page-section {
   border-top: 1px solid #ddd;
  margin-top: 40px;
  padding-top: 40px;
}
                
        

---

Final Thoughts

Adding lines between sections in Squarespace 7.1 is a simple way to elevate your page layout. Whether you want minimalism or something more stylized, CSS gives you the flexibility Squarespace’s built-in tools don’t always provide.