How to Add Borders to Images in Squarespace

A clean border can make an image look polished, but it's not obvious how to do so in Squarespace. So I'm sharing two methods you can use to add borders to images on your website: a no-code setup for one-off images, or CSS when you want the same style across a page or the whole site.

Add borders to a single image without code

Build the border with a shape block

When I add a border without code, I do it with a shape block. Click Edit, drop a shape block into the same section as the image, and then resize that shape so it matches the full width and height of the image I want to frame.

Then double-click the shape block to open its settings. The key setting here is Stretch. If the shape is not stretched, it will not line up cleanly with the image. The fill color does not matter much because the shape itself will sit behind the image, but I still like to set it to the same color as the border, usually black, so my settings stay easy to track.

Next, turn on the stroke. Squarespace gives preset sizes like small, medium, and large. The small preset is already 2px, which is thick enough to see while you work. If you want a thinner hairline border, lower it to 1px instead.

Once the stroke looks right, I click out of the settings, select the shape block again, and move it backward so it sits behind the image. At that point, the fill disappears, but the stroke stays visible around the edges. That creates the border effect.

Use "fill" and match rounded corners

This method only works when the image block is set to "fill". If the image is set to "fit", the photo will not occupy the full block area, so the border and image edges will not match.

If the border looks off, the image block is usually set to "fit" instead of "fill".

Rounded corners need one extra step.

To give the image a corner radius, for example 20px, the square-edged shape border looks wrong right away. To fix that, you’ll temporarily bring the image behind the shape, open the shape settings, and give the shape the same corner radius as the image. Then move the shape behind the image again. Once both values match, the border follows the curve cleanly.

I recommend using this approach when you want image-by-image control. It is simple, code-free, and you can decide exactly which images get borders.

The downside is speed. If you need to add borders to many images, repeating this setup block by block takes longer than it should.

Use CSS when you want borders on many images

Add a basic border to every image block

Go to the bottom of the Pages panel, click Custom Code, then open Custom CSS. From there, you can target all Squarespace image blocks with one rule:

.sqs-block-image {
  border: 2px solid #000000;
}

This line gives every image block a 2px solid black border.

The three values matter:

• 2px controls the width

• Solid sets the style

• And #000000 is the hex code for black

If you want a thinner line, change 2px to 1px. If you want a different color, simply swap the hex code.

The effect is the same as the shape-block trick, but CSS applies it much faster. As soon as I save, every image that matches that selector picks up the border. Sometimes Squarespace needs a refresh before you can see the change clearly, so save and reload when the preview looks slow to catch up.

Fix rounded corners and style individual sides

Rounded images need the same treatment here. If the image already has a 20px corner radius, you’ll need to add a matching border-radius value to the CSS:

.sqs-block-image {
  border: 2px solid #000000;
  border-radius: 20px;
}

In some cases, you may still see a tiny gap at the curve. When that happens, just bump the border radius up a little, say for this example to 22px. That small adjustment usually pulls the border into place.

CSS also lets you choose which side gets a border.

If you only want a line at the bottom, you can replace border with border-bottom. The same pattern works with border-top, border-right, and border-left.

.sqs-block-image {
  border-top: 2px solid red;
  border-right: 2px solid green;
  border-bottom: 2px solid #000000;
  border-left: 2px solid blue;
}

You can also change the style on any side.

Solid is the default, but dashed and dotted work too. That gives you a lot more freedom than the no-code method.

Target one page, one section, or one image

Use Squarespace ID Finder to narrow the scope

A site-wide border is handy until you only want it in one place. When that happens, you can use the Chrome extension Squarespace ID Finder to select specific the IDs for collections, sections, and blocks, which makes targeting much easier.

If I want borders on every image on one page, you’ll copy that page's collection ID and place it above the image selector in Custom CSS. That limits the border rule to that page only.

If you want the border in one section, you’ll do the same thing with the section ID instead.

Squarespace can be a little slow with targeted selectors, so I usually save and refresh after I swap IDs.

Quick tip: For page-level and section-level styling, I keep the .sqs-block-image selector and nest it under the page or section ID.

Apply CSS to one image block

Targeting a single image works a little differently. You’ll copy the block ID for that image, then replace the .sqs-block-image selector with the block ID itself. In other words, you’ll target that block directly instead of targeting every image block inside a wider area.

When you do that, you’ll also want to remove the extra closing brace that only made sense in the nested version. If that image does not use rounded corners, you can delete the border-radius line too. After a save and refresh, the border stays on that one image and disappears everywhere else.

This is the best CSS option when you want a one-off border but still prefer code over a shape block.

Pick the method that fits the job

When you need a border on one or two images, use the shape block method because it is quick and visual. If you need the same border across a page or an entire site, CSS is the better tool because you can apply it once and keep it consistent.