How to Round Corners of All Images in Squarespace: A 3-Step Guide [2024]
Rounding the corners of your photos can add a stylish and modern look and feel to your Squarespace website.
Changing the corner radius on image blocks with the design menu in Squarespace 7.1 is super simple.
If you have a lot of images on your site though, you probably don’t want to change every image one by one. Not only this, but some sections in Squarespace don’t have an option to adjust the corners.
What about list items, blog summaries, or project thumbnails in your portfolio? There is no option to edit these by default.
Not unless you have the handy CSS code to fix this, that is!
Step 1: Opening the Custom CSS editor.
To get started, log in to your Squarespace account and open your site. On the left menu, click “Website”.
Next, scroll down and click “Website Tools” under “Utilities” in the menu.
Inside of the “Website Tools” section, click on “Custom CSS” to access the CSS editor in Squarespace.
Step 2: Paste the CSS code.
Now that we’re in the Custom CSS editor, all we need to do is copy and paste the below code.
img {
border-radius: 10px;
}
This will round the corners of ALL of the images on your Squarespace site. To adjust the radius size (how curved the image corners look), just change “10px” to whatever value you prefer. The bigger the number, the more curved the images will look.
Step 4: Save and preview your changes!
After applying the CSS for your images, remember to save your changes in the CSS editor.
Next, click the “Preview” button to view all of your images on your Squarespace website.
If all images look as expected, congratulations! You have successfully rounded the edges of all images on Squarespace 7.1.
5 benefits of using rounded corners on your Squarespace site:
1. Modern Aesthetic
Rounded corners provide a contemporary and sleek look, aligning with modern web design trends. This can make your Squarespace website appear more up-to-date and stylish, which is appealing to visitors.
2. Softened Visual Impact
Rounded corners tend to soften the visual impact of images, making them more approachable and less harsh compared to sharp-edged rectangles. This can create a more welcoming and user-friendly atmosphere on your Squarespace website.
3. Improved Focus
By reducing the prominence of the image edges, rounded corners can help direct the viewer’s focus more effectively towards the content of the image itself. This subtle emphasis can enhance the storytelling or message conveyed by the image.
4. Enhanced Consistency
Using rounded corners can create a cohesive and consistent look across different images and sections of a website. This uniformity can improve the overall design harmony, making the site easier to navigate and visually pleasing.
5. Better Integration with Design Elements
Rounded corners can help images blend more seamlessly with other design elements on the page, such as buttons, cards, and icons that also feature rounded edges. This integration can contribute to a more unified and polished design on your Squarespace website.
Your users will thank you for adding this.
Congrats! You’ve officially reached the bottom of the article.
Want more tips like this? Join my newsletter below! It’s free, and I won’t spam you.
Your Squarespace Designer
Hi, I’m Nick. I've been designing killer brands and stunning websites for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.
Ready to discuss your project? Book a free 15 min consultation call!
