How to create offset image borders in Squarespace 7.1

This tutorial will show you how to create offset image borders using custom CSS in your Squarespace website. This may be particularly useful if you wish to improve the appearance of your website. It is particularly useful when you have an image background.

Complexity: Easy

---

Simply use the code below to create offset image borders. From your Squarespace account, go to the Custom CSS Editor. paste the code below into the Custom CSS editor box.

.design-layout-inline .image-block-wrapper {
 border: 3px solid #FFBF00; 
 overflow:visible!important} 
.design-layout-inline img {margin-left: 15px; margin-top: 15px;}

---

Here we use the border property see w3school for more information on borders.

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxxxx"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

---

If you wish to apply this to a specific image type then use the code below.

To apply to all the images on a page

#collection-id .design-layout-inline .image-block-wrapper {
 border: 3px solid #FFBF00; 
 overflow:visible!important} 
#collection-id  .design-layout-inline img {margin-left: 15px; margin-top: 15px;}

To apply to all the images on a section

#collection-id {

#page .page-section:nth-of-type(1) {

.design-layout-inline .image-block-wrapper {
 border: 3px solid #FFBF00; 
 overflow:visible!important} 
.design-layout-inline img {margin-left: 15px; margin-top: 15px;}

}

}

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.