Round Corners of List Section Cards on Squarespace
I use list sections on almost every Squarespace website that I design.
One shortcoming of Squarespace list sections that I’ve discovered however is once you’ve enabled cards within your list section, there’s no way to round the corners. At least not natively.
Keep reading to find out the custom code you need to add to your website to round the corners of list section cards on Squarespace.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Within your list section select edit content. Within the panel that appears ensure you’re in the design tab, select style and ensure the card option is enabled.
To round the corners of your cards, head to Website > Website Tools > Custom CSS and enter the following code into your custom CSS box:
.list-item {
border-radius: 10px;
}
You can play around with the px you choose, but I tend to find 10px looks the best.
Once you’re happy, hit save and you’ll have rounded the corners of your list section cards on Squarespace. Below is an example of what you can style your list section cards to look like.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
