How to add round corners to video blocks in Squarespace
This tutorial will show you how to add round corners to Youtube and Vimeo videos using custom CSS in your Squarespace website. This tutorial is specifically designed for Squarespace 7.1.
Customizing video blocks in Squarespace can enhance the visual appeal of your site. Adding rounded corners gives videos a softer, modern look that blends seamlessly with your design. With a simple CSS tweak, you can achieve this effect easily.
Table of Contents
Why Add Rounded Corners to Video Blocks?
Adding rounded corners to video blocks in Squarespace 7.1 is a simple design tweak that helps your content look modern, smooth, and cohesive — especially if your website uses rounded images, cards, or buttons. This tutorial will show you exactly how to apply this styling with custom CSS.
Benefits of Rounded Corners on Video Blocks
Modern Aesthetic: Creates a sleek and polished design.
Better Integration: Helps videos blend smoothly with other rounded elements.
Improved User Experience: Softer edges make the layout visually appealing.
Customization Flexibility: Allows you to match your brand’s style.
Easy Implementation: Requires just a few lines of CSS.
A useful tool you can use to identify the #collection-id, #blockid and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder
Complexity: Easy
How to Add Rounded Corners to Video Blocks — Step-by-Step
Step 1
Copy the code below and from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
/* Round corners YouTube/Vimeo Block */
[#BLOCKID] iframe {
border-radius: 25px !important;
}
Step 2
An example of the CSS code used is below
/* Round corners YouTube/Vimeo Block */
#block-yui_3_17_2_1_1740878517631_58901 iframe {
border-radius: 25px !important;
}
Step 3
An example of the CSS code used is below
/* Round corners YouTube/Vimeo Block */
#block-yui_3_17_2_1_1740878517631_58901 iframe {
border-radius: 15px 50px 30px 5px !important;
}
border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):
Step 4
Adjust the border-radius value to your liking.
Frequently Asked Questions (FAQs)
Can I add rounded corners to video blocks without coding in Squarespace?
No, Squarespace’s visual editor doesn’t currently offer this feature — you’ll need to apply a short CSS snippet like the one in this guide.
Will this work on both YouTube and Vimeo videos?
Yes! This CSS method applies to both YouTube and Vimeo video blocks embedded on your Squarespace 7.1 website.
Is the Squarespace ID Finder extension safe to use?
Yes — it’s a helpful Chrome extension commonly used by designers to identify block and section IDs within Squarespace pages for CSS targeting.
Conclusion
Applying rounded corners to video blocks in Squarespace is a quick way to elevate your site's design. By adding custom CSS, you can achieve a unique and professional look while maintaining a cohesive aesthetic across your website.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
