I use list sections on almost every Squarespace website that I design. 

One shortcoming of Squarespace list sections that I’ve discovered however is once you’ve enabled cards within your list section, there’s no way to round the corners. At least not natively. 

Keep reading to find out the custom code you need to add to your website to round the corners of list section cards on Squarespace.

Watch the video

Check out the YouTube video below 👇

Within your list section select edit content. Within the panel that appears ensure you’re in the design tab, select style and ensure the card option is enabled. 

To round the corners of your cards, head to Website > Website Tools > Custom CSS and enter the following code into your custom CSS box:

.list-item {

border-radius: 10px;

}

You can play around with the px you choose, but I tend to find 10px looks the best.

📩 Join the inner circle to get exclusive code updates

Once you’re happy, hit save and you’ll have rounded the corners of your list section cards on Squarespace. Below is an example of what you can style your list section cards to look like.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?