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?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

Squarespace Search Function THAT WORKS! [Monocle Search]

Next
Next

How to Create a Full Bleed Slideshow Gallery on Squarespace