How to Round Corners of List Section Cards in Squarespace
I LOVE list sections. I use them on almost every single Squarespace website I design.
They’re super versatile and customizable - EXCEPT for one small shortcoming. There is no way to round the corners of the cards in list sections natively.
Luckily for you, I’ve got the simple piece of CSS code you’ll need to fix this!
Step 1: Opening the Squarespace settings menu.
To get started, log in to your Squarespace account and open your site. On the left menu, click “Pages”.
Next, in the “Pages” tab, locate and click on the “Website Tools” option.
Step 2: Open the Custom CSS panel.
Inside of the “Website Tools” section, click on the top “Custom CSS” option to open the CSS editor in your Squarespace website.
Step 3: Upload the custom code.
You should now see the Squarespace Custom CSS editor. All we need to do now is enter a couple of lines of code. Find the code below!
Now all you need to do is copy and paste the following code into the CSS editor:
.list-item {
border-radius: 10px;
}
STEP 4: SAVE AND PREVIEW YOUR CHANGES!
That’s it! Your list section should now be updated. Remember to save your changes by clicking “Save” in the top right of the menu.
If your list section now has rounded corners, congratulations! You have successfully rounded list card corners on Squarespace 7.1.
5 benefits of using a List section on a Squarespace site:
Utilizing list sections effectively can help you create a more engaging, user-friendly, and visually appealing website on Squarespace, especially when combined with lovely rounded corners!
1. Structured Content Presentation
List sections in Squarespace help organize information in a clean, structured manner, making it easier for visitors to navigate and comprehend the content. This is particularly useful for displaying items like services, products, team members, or blog posts.
2. Enhanced Aesthetics
List sections provide visually appealing layouts that can be customized with images, text, and other elements. This enhances the overall look and feel of Squarespace the website, contributing to a professional and polished appearance.
3. Improved User Experience
By presenting information in a list format, visitors can quickly scan through the content and find what they are looking for without having to sift through large blocks of text. This improves the user experience and keeps visitors engaged.
4. Versatility and Customization
Squarespace’s list sections are highly versatile and customizable. You can easily add, remove, or reorder items in the list, adjust the layout, and customize the design to match your brand’s style. This flexibility allows you to create unique and dynamic content sections.
5. SEO Benefits
Well-organized list sections can improve your site’s search engine optimization (SEO). Lists are generally easier for search engines to crawl and index, and they can improve the readability and accessibility of your content, potentially leading to better search rankings.
Your users will thank you for adding this.
Congrats! You’ve officially reached the bottom of the article.
Want more tips like this? Join my newsletter below! It’s free, and I won’t spam you.
Your Squarespace Designer
Hi, I’m Nick. I've been designing killer brands and stunning websites for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.
Ready to discuss your project? Book a free 15 min consultation call!
