Add a Border Around a List Item Image on Squarespace

List sections

Sep 13

One of my most asked questions when it comes to Squarespace design is how do I get the border around the list item images on my website?

The secret is some custom code. Keep reading to find out more…

Watch the video

Check out the YouTube video below 👇

To add a border around a list item image on Squarespace you need to add some custom code.

To do this, head to Website > Pages > Website Tools > Custom CSS and you need to add the following code:

.user-items-list-carousel__media-inner {

border: 2px solid hsl(225, 87%, 9%);

border-radius: 10px !important;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;

margin: 18px !important;

}

This code tells Squarespace that you’re targeting your list images and that you want to add a border.

You can play around with the border radius, shadow and margin to get the look you’re after, but the above is how I have it set on my website.

To see this code in action just head to the by Crawford homepage and my list carousel, with borders around the images, is right there.

Once you’re happy with how your borders look, hit save and you’re all done.