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 👇
Want a framework for designing the perfect homepage?
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.
Once you’re happy, hit save and that’s how you round the corners of summary block thumbnail images on Squarespace.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
