Squarespace Guide: Round Summary Block Thumbnail Images

There are some features on Squarespace that I think are lacking, and one of those is summary blocks.

Specifically, how much you can edit summary blocks. It would be great if you could round the corners of summary block thumbnails natively but unfortunately that’s not an update Squarespace has released yet.

The good news is though that there IS a way to round summary block thumbnails, it just requires some custom code.

Watch the video

Check out the YouTube video below 👇

Head to Website > Pages > Website Tools > Custom CSS and use Shift + Command + C to bring up the ID for the summary block.

This is: .summary-thumbnail-container

Paste the ID into the custom CSS block and then add the following code:

{
border-radius: 10px !important;
}

The end code should look like this:

.summary-thumbnail-container * {
border-radius: 10px !important;
}

You can play around with the px you choose depending on how rounded you want the corners to be.

---

📩 Join the inner circle to get exclusive code updates

---

Once you’re happy, hit save and that’s how you round the corners of summary block thumbnail images on Squarespace. 

---

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?