How to add a border to the content side of the collage block

• 00
• 01
• 99

If you’re a fan of using all the different image block layouts available in Squarespace, I’m pretty sure you’ll be a fan of today’s CSS trick too!

This customization is very simple, and it will only take you a couple of minutes to achieve, but it will allow you to give your design a nice touch that no native template can, so why don’t we jump into it?

Adding a border to collage blocks

We’re starting out with a collage block that I’ve tweaked a little through the Site Styles to adjust the content position and image size.

Let’s take a look through Inspect Element to locate the container or wrapper that’s holding our content, the one that has the background color, since that’s the area we want to… border?

Ok, as you can see above in the zoomed in inspect window, we can see that our container has a couple of classes.

What’s more, on the right side we can see the exact selectors Squarespace is using to target that container to apply the background color:

And by reading through those classes (.sqs-block-image .design-layout-collage and .image-card) we can see they’re targeting the collage layout specifically, so that whole selector is perfect for us to make sure our border goes onto the colored area of collage blocks only.

Let’s plop it into our Custom CSS window!

.sqs-block-image .design-layout-collage .image-card {
  
}

And now let’s add in our border.

I’ll make it black and 1px in thickness

.sqs-block-image .design-layout-collage .image-card {
  border: 1px solid black;
}

Well, we can’t really see it right now because it’s the same color as the background, so I’ll go back into the Style Editor and change up a few things to make the background transparent (so only the border shows) and the text black.

Here’s the final result:

Nice! That looks absolutely lovely and it took us about 5 minutes to achieve.

Oh, and in case you’re wondering, you can totally add in just ONE border!

You can use border-top, border-bottom, border-left or border-right to set just one or a couple of them instead of all around.

I hope this was helpful for your current and/or future projects!

Until next time,

B.

---

Full code

/*ADDING A BORDER TO THE CONTENT SIDE OF COLLAGE BLOCKS*/
.sqs-block-image .design-layout-collage .image-card {
  border: 1px solid black;
}