How to customize accordion block divider lines in Squarespace

content block

Sep 26

The accordion block is quickly becoming one of my favorite ways to share content on my site. 🥰

Squarespace gives us a few design options, like changing the height/thickness and transparency for an individual block, or changing the color for an entire color theme, but that’s about it, unless you use CSS! 🙌

In this tutorial you’ll learn how to turn the solid line into a unique border or even a fancy linear gradient. The codes for this tutorial are below; be sure to watch the video so you know how to use them.

If you are brand new to customizing Squarespace with code, you’ll find helpful information underneath this tutorial.

Important update: Squarespace made changes to the program menu in May 2025. If your menu looks different than the video, press the / key to open the program search and search for Custom CSS to navigate there directly.

  
    /* standard line */
.accordion-divider{ 
color:transparent!important; 
height: 0!important; 
border-top:2px dotted green; 
}
/* gradient line */
.accordion-divider{ 
color:transparent!important; 
height: 3px!important; 
background:linear-gradient(to right,  #333, transparent) 
}
  