Round List Item Image Corners Squarespace [List Section Styling]

While I really like Squarespace list sections, I do wish we had more control over the styling of them.

A lot of the time we need to use CSS to get them to look how we want.

In this article I’ll show you the code you need to round the image corners of list items on Squarespace.

Watch the video

Check out the YouTube video below 👇

To round list item image corners on Squarespace head to Website > Pages > Website Tools > Custom CSS and paste the following code into your CSS box:

.list-item img { 

border-radius: 10px;

}

This code will simply tell Squarespace to round the corners of list item images. You can play around with how much you round the corners but I think anything between 10px and 20px looks best.


📩 Join the inner circle to get exclusive code updates


Once you’re happy, hit save and you’re all done!


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?

Sam Crawford

by Crawford is led by Sam Crawford, a multi-award-winning Squarespace website designer with 700+ sites launched for clients in over 30 countries. He builds fast, mobile-friendly Squarespace 7.1 websites designed for SEO, clear structure, and conversion.

As a Squarespace Expert, Enterprise Partner, Circle Member, and community speaker, Sam is known for pushing the platform’s limits. With 200+ reviews, clients highlight by Crawford’s clarity, precision, and real-world results like higher rankings and stronger lead generation.

https://bycrawford.com
Previous
Previous

Squarespace Menu System Explained [DEEP DIVE]

Next
Next

Register a Domain With Squarespace [Easy Setup Guide]