How to curve the corner of every image in Squarespace
This tutorial was recorded in Squarespace 7.1 but also applies to legacy sites built on version 7. For more information, visit insidethesquare.co/themes
If you’re a Squarespace user, you know that the platform offers a range of style options. But if you’ve felt limited by the lack of customization options, fear not! You can use custom CSS to add a unique touch to your site.
For image blocks in version 7.1, you can round the corners with the design menu. But what about list items? Blog summaries? Project thumbnails in a portfolio?
We can curve all of them with one line of code.
In this tutorial, you’ll learn how to round the corners of all images in your Squarespace site using just a few lines of code.
I’ll also show you how to remove that rounded corner from a specific image using it’s block id.
Here’s what to do:
Step 1: Log into your Squarespace account and click on Design and then Custom CSS.
Step 2: Paste this code into the Custom CSS box:
img { border-radius: 30px; }
This will round the corners of all images on your site. To adjust the radius size, simply change 30px to whatever percentage you prefer.
Pro tip: You can use any type of value instead of 30px, but not all types of values will look the same for every image. 50% will curve the edges 50% horizontally and vertically. Square images will be a perfect circle, and others will be an oval. For a streamlined look. I recommend using a px value so every image has the exact same corner style.
Step 3: Click “Save” and you should see an immediate effect on the images in your page.
Step 4 (optional): If there are certain images that you don't want to be rounded, you can grab it’s block-ID and add it to this code after Step 2 :
#block-123456 img { border-radius: 0; }
This will reset that image back to its original corner shape.
Here is a link to the free Chrome extension that I use to get block ID information. I’m not affiliated with this extension or who made it, just a fan!
Adding rounded image corners is one of many ways that you can customize your Squarespace site with custom CSS.
I hope this tutorial has helped give you ideas for how else to use custom CSS techniques on your site.
There are hundreds of other tutorials to explore here on my site, and I can email you a new one every week!
