I love to add borders to my Squarespace websites. Around headers, footers, buttons; borders can help elements stand out and be a super effective design technique.

One of my favourite ways to use borders on Squarespace is to add them to images. Adding a border around an image can really elevate your Squarespace design and help to make your page feel complete.

So, let’s take a look at how to add a border around an image on Squarespace with just a small snippet of custom code.

How to add a border around your image

First of all you need to find out the block ID for the image you want to add a border to. Use your Squarespace ID Finder Chrome plugin and copy the block ID for your chosen image.

Then, head to your CSS panel and add some new lines of code, naming them something like “// Image border //”. Paste in your block ID and add the code:

#BLOCK-ID {
border: solid 1px white;
padding: 0;
}

Or you can target the image specifically such as:

.image-block-wrapper {
border: solid 1px white;
padding: 0;
}

Once you’ve added in the code you can customise it to fit your design needs.

Upping the weight of the border will make it thicker, changing the colour will, you guessed it, make it a different colour and altering the padding will determine whether there is any padding between your image and the border.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

If you want to make your border slightly curved, you can also add:

border-radius: 10px;

This would look like:

.image-block-wrapper {
border: solid 1px white;
padding: 0;
border-radius: 10px;
}

Adding a border to an image is a particularly useful idea if you have two loud, contrasting images on your website. For example, if you have a busy background image and you add an image block, adding a border can help to ensure the primary image isn’t lost within the background.

It’s super simple to add a border to images on Squarespace so have a go and customise the specifics to help you figure out the border design that’s right for your Squarespace website.

If you enjoyed this guide, why not check out how to change the shape of images on Squarespace next?