How to customize accordion block divider lines in Squarespace

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About this tutorial

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

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.

---

Video tutorial

Here are some time stamps in case you want to jump ahead:

00:32 How to access accordion block divider design settings

01:17 How to add custom CSS to Squarespace

01:28 How to turn a divider line into a unique border

02: 17 Apply custom code to a single accordion block using its block ID

---

Code Example

Here are the codes from this tutorial. Remember, that you can update the border & gradient codes to match the style of your own unique website!

Create a standard border accordion divider line

Learn more about borders at insidethesquare.co/borders

.accordion-divider{

color:transparent!important;

height: 0!important;

border-top:2px dotted green;

}

Create a gradient accordion divider line:

Learn more about gradients at insidethesquare.co/gradient

.accordion-divider{

color:transparent!important;

height: 3px!important;

background:linear-gradient(to right, #333, transparent)

}

---

Related Content

Want to apply this to one specific accordion?

Use it’s block ID! That’s a unique number generated by Squarespace that will tell a computer “only this specific one gets this style” Here is a link to the Chrome extension I used in the video. Not affiliated with this extension or its creator, just a fan! 🎉 https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Want to apply this to one specific page?

Check out this tutorial to learn how to install CSS on an individual page in Squarespace, even if you’re on a personal plan: https://insidethesquare.co/squarespace-tutorials/single-page

Here are links to a few other tutorials you can check out to customize your Squarespace accordion block:

• Brand new to CSS? Start with my free course here: insidethesquare.co/learn

• How to create a button inside an accordion description

• How to create an alternating color accordion block in Squarespace

---