Customize the Accordion Block in Squarespace (Background, Hover & Border Radius)

The Accordion Block in Squarespace is a great way to organize content into collapsible sections—perfect for FAQs, services, or product details. But by default, it looks pretty simple. With just a few lines of custom CSS, you can easily enhance its appearance by adding a background color, hover effects, and rounded corners for a more polished, branded look.

In this guide, I’ll walk you through how to customize your Accordion Block step-by-step—no coding experience required.

Why Customize the Accordion Block?

Customizing your Accordion Block can:

• Make your content sections stand out with your brand’s colors

• Create a more interactive hover effect for better user engagement

• Add smooth rounded edges that match your site’s modern design

• Maintain a clean, minimal layout while improving visual appeal

These small design enhancements can make your Squarespace website feel truly bespoke and more aligned with your brand identity.

Step 1: Add the Custom CSS

To style your Accordion Block, follow these steps:

1. Go to your Squarespace dashboard.

2. Navigate to Design → Custom CSS.

3. Paste the following code snippet:

/* Accordion: Background + Border Radius + Hover */
div.accordion-divider {
    display: none;
}
li.accordion-item {
    background-color: pink;
    margin-bottom: 12px !important;
    border-radius: 12px;
    padding: 0px 12px !important;
}
li.accordion-item:hover {
    background-color: grey !important;
    transform: translateY(-3px);
}

Step 2: Customize the Colors and Spacing

You can easily modify this CSS to match your site’s style:

• Change “pink” and “grey” to any color code (for example, #f7c6d9 for soft pink or #222 for dark grey).

• Adjust border radius — increase to 20px for a more rounded look or set to 0 for square corners.

• Tweak padding and margin values to control spacing around and within each accordion item.

Step 3: Preview and Test

After adding your CSS, open any page that includes an Accordion Block and hover over it. You’ll see:

• A subtle background color

• Rounded corners

• A hover color that changes when you move your cursor over it

If you don’t see changes right away, try refreshing your browser or clearing your cache.

Step 4: Keep Your Design Consistent

When applying custom styling to elements like accordions, it’s best to use consistent colors and corner radii across your website. This maintains a cohesive design language and ensures everything feels intentional.

Wrapping Up

Customizing the Accordion Block in Squarespace is an easy yet effective way to make your content feel more branded and interactive. With just a few lines of CSS, you can add background colors, hover effects, and rounded corners that bring a professional, cohesive touch to your design—without needing advanced coding skills.

Want help refining your Squarespace site or adding custom CSS features like this?
Get in touch with me here — I’d be happy to help you create a clean, modern, and on-brand Squarespace experience.

Your Designer

I'm Ankush, a Squarespace web designer and founder of webgoyat. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at info@webgoyat.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.