How to create offset image borders in Squarespace 7.1

Want to add a modern, editorial-style effect to your images on Squarespace 7.1? One popular trend is using offset image borders—where the border appears shifted or layered behind the image. This subtle effect can make your visuals stand out while keeping your design clean and stylish.

In this tutorial, we’ll walk you through how to create offset image borders using custom CSS—no extra plugins or complicated code required.

Table of Contents

• Why Use Offset Image Borders

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Use Offset Image Borders?

Offset borders are a great way to:

• Add depth and dimension to your images

• Create a layered or floating effect

• Highlight key visuals without distracting from your content

• Give your site a custom-designed look with minimal effort

Complexity: Easy

---

Step-by-Step Instructions

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

.sqs-block-image {
 border: 1px solid;
  padding: 10px;
  box-shadow: 10px 10px #000;
}

---

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.

---

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

To apply on a particular image

#block-id {
 border: 1px solid;
  padding: 10px;
  box-shadow: 10px 10px #000;
}

To apply to all the images on a page

#collection-id .sqs-block-image {
 border: 1px solid;
  padding: 10px;
  box-shadow: 10px 10px #000;
}

To apply to all the images on a section

#collection-id {

#page .page-section:nth-of-type(1) {
.sqs-block-image {
 border: 1px solid;
  padding: 10px;
  box-shadow: 10px 10px #000;
}
}

---

Key Takeaways

• Offset image borders create a layered, editorial effect

• Easily implemented using custom CSS in Squarespace 7.1

• Use box-shadow and transform to simulate the offset

• Can be applied globally or to specific image blocks

FAQs

Will this affect images in gallery blocks?
No, this CSS targets standard Image Blocks. To apply to galleries, you'd need to use different selectors.

Can I make the offset effect only appear on hover?
Absolutely! Here's a hover-only version:

.sqs-block-image { transition: all 0.3s ease; } .sqs-block-image:hover { border: 1px solid; padding: 10px; box-shadow: 10px 10px #000; }

Will this work on mobile devices?
Yes, but if it looks too extreme on smaller screens, you can adjust or disable it using media queries.

@media screen and (max-width: 600px) { .sqs-block-image { border: 0 px; box-shadow: none; } }

---

---

Conclusion

Offset image borders are a small but powerful way to elevate your website’s design. With a few lines of CSS, you can transform flat images into engaging visual elements that help guide the viewer’s eye.

---

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, expressed 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.