How to add a border to your gallery section images

Ever look at your gallery section and think "this needs a little something extra"?

If so, you’re on the right blog post, Squarespacer! In this tutorial, I'm sharing one of my favorite quick CSS tricks - adding borders to your gallery images. Whether you're showcasing your photography portfolio, product collection, or client work, this simple code addition can make your gallery sections look extra polished and professional.

I'll walk you through exactly how to do this for any gallery layout - grid, strip, or masonry.

Before we dive in, if you're new to custom CSS and loving these kinds of tutorials, I've created a beginner-friendly class that teaches you Squarespace CSS basics in under 20 minutes. You can check it out at insidethesquare.co/learn

When you’re ready, check out the video and grab the codes below to make those galleries pop! ✨

Here are the main codes from the tutorial. Make sure you are using the correct code for your gallery type!

/* code from insidethesquare.co */
.gallery-masonry-item-wrapper{
border: 3px dotted purple
}

/* grid gallery code from insidethesquare.co */
.gallery-grid-item{
border: 5px double orange
}

/* strip gallery code from insidethesquare.co */
.gallery-strips-item-wrapper{
border: 5px dashed blue
}