How to Add a Border to All Images on a Squarespace Website
Add a Border to All Images in Squarespace
This easy step-by-step tutorial will show you how to add a border to all images on a Squarespace Website using custom CSS.
If you only want to add a border to an image or a few images, but you don’t want a code that affects ALL the images on your website, I have a blog post that shows you how to add a border to an image block in Squarespace.
How to Add a Border to All Images on a Squarespace Website
To add a border to all the images on your Squarespace website, follows these steps. If it helps, watch me do it in the video above.
In fluid engine, make sure your images are set to “fill” (pages that still use the classic editor, like blog pages, don’t have this option, but the custom CSS works just fine for these images)
Go to pages> Website tools > Custom CSS
Copy the code below this video (scroll down) and paste it here
Change the hex code to match your brand color
Change the padding around the image to whatever you like—right now it is set at five pixels. You can change it to 0 if you want the border to abut the image
Change the border thickness to whatever you like—right now it’s set to 2 pixels
Hit save.
So easy, right?
Add This Code to Custom CSS to Add a Border to All Images in Squarespace
/* Add border to all images */
img {
border: 2px solid #000;
padding: 5px;
box-sizing: border-box;
}
Your beautiful website won’t do you any good if no one sees it.
Design is fun, but your website needs an actual strategy to convert website visitors into paying customers.
To learn more about how to attract and engage your target audience to your Squarespace website, check out my blog posts on website strategy and blogging where I share lots of tips and strategies for attracting and engaging your target audience to your Squarespace website.
Was this helpful?
Are you going to use this code on your Squarespace website? Can you see the challenges it presents if it’s applied to all your images? Are you more likely to use this code or the code for a single image at a time? Share your thoughts 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
