How to Add a Border to an Image on Your Squarespace Site (No Plugin Needed)

Discover how to easily add a clean border to your Squarespace images using simple CSS. No extra tools or plugins required, just a quick method you can apply in minutes to give your visuals more impact and style.

---

Why add a border at all?

A well placed border can:

• Give structure to images in a minimalist layout

• Create separation between similar background colors and the image itself

• Add personality and branding if you use your brand’s color palette

The key is subtlety. You want the border to complement the image, not overpower it.

---

Step 1: Identify the image block

Log in to your Squarespace site and go to the page where the image lives. Click Edit on the page, then Edit on the image block. You do not need to change anything here yet, the goal is to confirm that it is a standard image block and not part of a gallery or background section.

---

Step 2: Add your custom CSS

From your Squarespace dashboard:

1. Go to Design → Custom CSS

2. Paste this snippet:

.sqs-block-image img {
  border: 3px solid #000; /* Change #000 to your color */
  border-radius: 6px; /* Optional: rounds corners */
}

---

Step 3: Adjust for your style

• Border width: Change 3px to make it thicker or thinner

• Border color: Use your brand’s HEX code to match your site

• Border radius: Remove this line if you want sharp corners

---

Step 4: Apply only to a specific image

If you only want one image to have the border, you can target it directly using its unique ID. An easy way to find that ID is by using the Squarespace ID Finder Chrome extension. Once you have the ID, use this CSS:

#block-yui_3_17_2_1_123456 img {
  border: 3px solid #000;
  border-radius: 6px;
}

Replace the example ID above with the one from your site. This ensures the border applies only to that specific image and nowhere else.

---

Step 5: Preview and save

Always check your design on both desktop and mobile before saving. Borders can look heavier on smaller screens, so you might adjust the width for mobile with a media query if needed.

---

Adding borders in Squarespace is simple and clean. You avoid unnecessary plugins, keep your site lightweight, and stay in control of the design.

If you are looking for more ways to style images on your site, I help businesses create custom on brand Squarespace designs that go beyond templates.

---

Want a custom tutorial or have a burning question?

Tell me what topics you’d like me to cover. Your input helps shape the content here at ByKatss, so don’t be shy. Fill out the form and I’ll get to work on your request.