How To Add An Inset Border to Images in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
This tutorial will show you how to create an “inset” style border for images in your Squarespace site.
There are MANY different types of images in Squarespace so this tutorial will focus on image blocks and a section background image.
The main codes from this tutorial are below, along with the selectors that I used.
Be sure to adjust the color and weight of the border and to pick the right block ID and/or selector for what you want to isolate. You also need to keep the lengths of height and width using relative values so it resizes with the object itself.
Here is the main code I used for an image block inset border:
#block-123456 .image-overlay {
background-color: transparent!important;
border: 5px solid #000;
opacity:1!important;
width: 80%;
height: 80%;
margin:auto;
}
To add this code to a specific image, use the block id like the example above. To add it to all images of a specific type, use the image selector, like this
.design-layout-collage .image-wrapper {...
For an entire section, use the data section id like this:
[data-section-id="123456789"] .content-wrapper {border:5px solid red!important; width:80%; padding:2rem!important; margin:auto!important}
Here is a link to the free Chrome extension you can use to grab the block id or section id. I am not affiliated with this extension or its creators, just a fan!
