Add a Border Around an Image in Squarespace (Step-by-Step CSS Guide)

Adding borders to images is one of those simple design tricks that can completely transform the look and feel of your website. Whether you want to highlight a product photo, create separation in a gallery, or add polish to your portfolio — borders bring clarity, structure, and balance to your web design.

As a Squarespace web designer, I often use image borders to make visuals pop without overwhelming the layout. In this tutorial, I’ll show you how to add a border around an image in Squarespace using clean, minimal CSS — perfect for beginners and pros alike.

Why Borders Matter for Images

Even a subtle border can enhance your Squarespace design by:

• Highlighting an image so it stands out on the page.

• Adding structure to your content without overwhelming it.

• Creating a polished, professional look that feels intentional.

Borders are a minimalist, effective way to make your visuals feel complete and balanced.

Step 1: Find Your Image Block ID

To target a specific image in Squarespace with CSS, you need its unique block ID. Here’s how:

1. Install the Squarespace ID Finder Chrome Extension.

2. Hover over the image you want to style. The block ID will appear (e.g., #block-yui_3_17_2_1_1234567890_12345).

3. Copy this ID — you’ll use it in the CSS snippet.

Step 2: Add Custom CSS

Navigate to Design → Custom CSS in Squarespace and paste the following code:

#block-903016c796e76d66c3a1 {
   outline: solid 2px #59c4c0;
   background-color: #fff;
   }

Replace #BLOCK-ID with the ID you copied.

Step 3: Customize Your Border Design

You can tweak the CSS to match your website’s style:

• Border Thickness: Adjust 2px to make it thinner or thicker.

• Border Color: Change #000 to match your brand colors or page aesthetic.

• Rounded Corners: Add border-radius: 10px; for soft edges.

• Padding: Include padding: 5px; to create space between the image and the border.

Other Options

There are also some other CSS changes you can make for an even more custom look.

#block-yui_3_17_2_1_1592233912191_79164:hover  {
   outline: solid 2px #59c4c0;
   background-color: #fff;
   opacity: 0.5;
   }

Important Notes

1. This method works only for individual image blocks.

2. Avoid using this CSS on galleries, portfolios, or product images — they require different code.

3. Always preview on mobile devices to ensure the borders look proportionate and clean.

Wrapping Up

Adding a border around an individual image block in Squarespace doesn’t have to be complicated. With a simple snippet of CSS and your block ID, you can quickly create a polished, professional look—without diving deep into complex code.

Need help customizing your Squarespace site or applying CSS tweaks? Reach out to me here—I’d be happy to help.

Your Designer

I'm Ankush, a Squarespace web designer and founder of webgoyat. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at info@webgoyat.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.