Add a Border Around a List Item Image on Squarespace

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.

---

📩 Join the inner circle to get exclusive code updates

---

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

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?