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.

/* 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) 
}