How to add borders to images with CSS in Squarespace 7.1 (Fluid Engine)
Pin to save for later
Adding a border to images is a simple yet effective way to enhance your website’s visual appeal and create a polished, cohesive design.
While Squarespace provides many built-in design features, custom CSS can unlock additional styling possibilities that take your site to the next level.
In this post, we’ll guide you step-by-step through the process of adding and customizing borders to single images or site wide images images, and, your blog/shop page thumbnails using CSS in Squarespace 7.1. Whether you're looking to create subtle accents or bold frames, we've got you covered!
Option 01:
How to add borders to all images site wide
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
// IMAGE BORDERS SITEWIDE
.fluid-image-container, .sqs-video-wrapper {
border: 1px solid #000000;
}
.sqs-image, .sqs-image div {
overflow: visible !important;
}
.content-fit img {
object-fit: cover !important;
}
Important Notes:
For the thicker border stroke around the image: update 1px to a larger number (Example: 3px)
To change the border color: update #000000 to HEX code of choice
Option 02:
How to add borders to a single images on your website
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
// IMAGE BORDER
#BLOCK-ID-HERE {
border: solid 1px #000000;
padding: 0;
} How to update the block ID:
Block ID’s target the specific blocks on your website.
Here is an example of a block ID: #block-2c64c469358a23b66a91
To identify block ID’s, there’s an easy to use Google Chrome extension that will magically show you Block ID’s for every section on your website with the click of a button.
Add the Chrome plugin to your toolbar, open your website, and click the grid icon on the top right corner to enable the extension. You will immediately see the red block ID’s for all of the blocks on your site.
Click on the red sticker associated with the image you’d like to add a border, and the block ID will automatically be copied to your clipboard.
3. Update #BLOCK-ID-HERE with the block ID copied to your clipboard
4. Save!
Important Notes:
For the thicker border stroke around the image: update 1px to a larger number (Example: 3px)
To change the border color: update #000000 to HEX code of choice
Option 03:
How to add borders to your shop page thumbnails
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
//SHOP IMAGE BORDERS
.products.collection-content-wrapper .grid-item .grid-image{
border: 1px solid #000000;
}Important Notes:
For the thicker border stroke around the image: update 1px to a larger number (Example: 3px)
To change the border color: update #000000 to HEX code of choice
Option 04:
How to add borders to your blog page thumbnails
1. From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
2. Copy & paste the CSS in the box below:
//BLOG THUMBNAIL IMAGE BORDERS
.blog-basic-grid .image-wrapper {
border: 1px solid black;
}Important Notes:
For the thicker border stroke around the image: update 1px to a larger number (Example: 3px)
To change the border color: update #000000 to HEX code of choice
** CSS will only work for blogs set to Grid Layout
All set!
Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!
* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!
