How to create offset image borders 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 a border or frame for an image in Squarespace that sits slightly offset from the image itself.

A few important things to note before you copy and paste this into your own site:

→ This tutorial is for the image block in classic editor, not the new block in Fluid Engine. To learn more about this update, visit insidethesquare.co/fluid

→ Yes, you can TOTALLY create a PNG like this in an image editing program like Photoshop, Canva pro and others… this tutorial is for folks who don’t have access to those programs or don’t know how to create this using those; code to the rescue!

→ Be sure to edit the code to suit your own site style, trying different border types and changing the margin to fit your image style.

→ This code is specifically on page images and won't work for other types like galleries.

→ You can apply this to a single image by using its block id. There is a free chrome extension that I use to easily grab that info, available here. Please note that i am NOT affiliated with that company or extension in anyway - I just use it myself!

Here is the code from this tutorial for inline images.

Change up the border style, pixel width, and color for the image block wrapper and be sure to adjust the margins for the image itself so it looks great on your site!

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

Use this box shadow code to create that inset border, creating the look of a lifted image.

.design-layout-inline .image-block-wrapper {border: 2px solid #000; overflow:visible!important; box-shadow:inset 5px 5px 15px rgba(0,0,0,0.3)} design-layout-inline img {margin-left: 25px; margin-top: 25px; }