How To Round Corners On Background Videos In Squarespace

Add a modern touch to your Squarespace background videos with this easy CSS trick. In this video you can learn how to round corners on background videos in Squarespace 7.1. The CSS snippet is down below and you can copy and paste and make adjustments to fit your needs. Make sure the background video is set to ‘inset’ for it to work properly. Hope it helps!

If you’re interested in the Serenity squarespace template seen in the video, you can purchase it here!

Don’t forget to subscribe to our youtube channel here!

Affiliate Disclaimer: Please note this post contains affiliate links. If you go through them to make a purchase, I will make a commission at no cost to you. Thanks for your support!


Watch the video for How to Round Corners on Background Videos in Squarespace 7.1:

Add the following code:

// Video Background Rounded Corners //
.page-section.background-width–inset .section-background {
border-radius: 20px !important;


// Video Background Rounded Corners & Border //
.page-section.background-width–inset .section-background {
border-radius: 20px !important;
border: solid white !important;



You can change the ‘border-radius’ and ‘border’ color to fit your needs!

Don’t Forget To

Pin Your Favorite

Hey, I’m Marci

I’m the web designer & developer and the woman behind Dragonfly Ave. I love sharing resources, tutorials, biz tips and so much more. Hope you enjoy!

Browse Categories






Shop Website Templates


Pin It on Pinterest