How to Add Borders to Your Squarespace Website Images
If you have been trying to figure out what you HAVE to do to get frame your images on your Squarespace website with aesthetic borders, then this quick tutorial is for you!
I absolutely LOVE adding a little touch of a border to photos on your Squarespace website - it just adds a bit more dimension and a classic, modern look to your site.
Below, I’ll share the exact code you need to add to achieve this border image look on all pages of your website!
Don’t feel like reading? Then watch the Youtube video below, where I demo exactly what you need to do in this post in video format!
First Step - Install
First, you are going to want to install the Squarespace ID Finder Chrome plugin to your Chrome browser.
This plugin is going to allow you to easily copy the block-id for the photos on your site, which lets you add the code needed to add a border around those images!
Add Borders to Your Images - 7.1 Fluid Engine Version
For Squarespace Fluid Engine, adding borders only works on images with the Fill Attribute set on the Image Design Tab, so make sure that is set.
First, you are going to head over to Design -> Custom CSS to get some custom code added.
Note: Make sure to start a new line if you already have code in this section.
Next, you are going to paste the following code:
//7.1 Fluid Engine
#block-yui_3_17_2_1_1679063882940_2384 {
border: 2px solid #000;
}
Then, you are going to use your new Squarespace ID Finder plugin that you installed to find the block id:
Click the puzzle icon in the top right corner of your browser
Click the “Squarespace ID Finder” to turn it on
Click the “#block-yui…” id on the image you want to add a border to in order to copy the id
And then replace the “#block-yui…” id in the code with your own id you just copied!
Note: To add more images, just add a comma at the end of the block id, and paste the next block id, so it looks something like:
#block-yui_3_17_2_1_1679063882940_2384, #block-yui_3_17_2_1_1679063882940_2384 {
border: 2px solid #000;
}
Wondering how to modify the size or color of the border?
Border Size: On the first line, change the value of 1px to whatever size looks best (i.e 20px, 1.3px, 5px, etc)
Border Color: On the first line, change the value of #000 to whatever hex code you want it to be (i.e. #ffffff, #A020F0, etc)
Add Borders to Your Images - 7.1 and 7.0 Classic Editor Versions
First, you are going to head over to Design -> Custom CSS to get some custom code added.
Note: Make sure to start a new line if you already have code in this section.
Next, you are going to paste the following code:
//7.1 and 7.0 Classic Editor
#block-yui_3_17_2_1_1679064659364_3971 .sqs-image-shape-container-element {
border: 2px solid #000;
}
Then, you are going to use your new Squarespace ID Finder plugin that you installed to find the block id:
Click the puzzle icon in the top right corner of your browser
Click the “Squarespace ID Finder” to turn it on
Click the “#block-yui…” id on the image you want to add a border to in order to copy the id
And then replace the “#block-yui…” id in the code with your own id you just copied!
Note: To add multiple images, follow the format below and just add a comma at the end of each block id when you want to add a new one, so it looks something like:
#block-yui_3_17_2_1_1679063882940_2384, #block-yui_3_17_2_1_1679063882940_2384 {
.sqs-image-shape-container-element {
border: 2px solid #000;
}
}
Wondering how to modify the size or color of the border?
Border Size: On the first line, change the value of 1px to whatever size looks best (i.e 20px, 1.3px, 5px, etc)
Border Color: On the first line, change the value of #000 to whatever hex code you want it to be (i.e. #ffffff, #A020F0, etc)
And that’s all! Super easy to add, not hard, confusing code, and you’ve got some beautiful borders surrounding your Squarespace website images with a quick copy and paste of some code!
