Add a Border or Outline Around Images

What does this code do?

This code snippet will allow you to add a border or outline around images.

With an Outline Offset

Without an Outline Offset

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Outline on All Images */
img {
  outline: black solid 3px; 
  outline-offset: 5px; /* adds space between the image and the border */
}

/* Outline on Specific Images */
SELECTOR img {
  outline: black solid 3px; 
  outline-offset: 5px; /* adds space between the image and the border */
}

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* One Section */
#PAGEID

/* All Inline Images */
.design-layout-inline 

/* All Poster Images */
.design-layout-poster

/* All Card Images */
.design-layout-card

/* All Overlap Images */
.design-layout-overlap

/* All Collage Images */
.design-layout-collage

/* All Stack Images */
.design-layout-stack

/* One Image */
#BLOCKID

Squarespace 7.1

/* One Page */
#COLLECTIONID

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1)

/* All Inline Images */
.design-layout-inline 

/* All Poster Images */
.design-layout-poster

/* All Card Images */
.design-layout-card

/* All Overlap Images */
.design-layout-overlap

/* All Collage Images */
.design-layout-collage

/* All Stack Images */
.design-layout-stack

/* One Specific Image */
#BLOCKID

How To Use It

1. Copy and paste the code as indicated above.

2. Choose the selector that matches your situation.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

5. Customize the color, thickness, and offset. You can use a word, rgb, or hex code for the color.