How to Add a Border Around a Video Block on Squarespace
Want to add a border around your video in Squarespace, but running into strange gaps or spacing issues? You’re not alone. What seems like a simple task can get surprisingly annoying thanks to a little bit of built-in padding around video blocks.
The good news? I’ve figured out a reliable way to do it using custom CSS, and I’m going to walk you through it step-by-step.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Why Is There a Gap Around Squarespace Video Blocks?
When you use a native video block in Squarespace, there’s some default padding built into the element. So if you try to add a border, it doesn't hug the video tightly - instead, it floats with a little awkward space between the border and the actual video.
It’s not technically a bug, but it sure looks like one.
Here’s how to fix it and add a clean, professional-looking border around your Squarespace video.
Step-by-Step: Add a Border to a Video Block in Squarespace
This method only works with videos that are uploaded natively to Squarespace (not YouTube or Vimeo embeds).
Step 1: Go to Custom CSS
Log into your Squarespace dashboard.
Navigate to Design > Custom CSS.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
Step 2: Add the CSS Code
Paste the following CSS code into the custom CSS box:
.sqs-native-video {
border: solid 5px #ffd600 !important;
}
Breakdown of the CSS:
.sqs-native-video targets the video block.
border: 5px solid #ffd600; creates a 5-pixel solid border (you can use any color or hex code).
border-radius: 20px; adds a subtle curve to the corners (optional, but looks slick).
You can fully customize this:
Border size: 1px, 10px, 15px, etc.
Border color: Use names like red, black, or hex codes like #333, #ff6600, etc.
Border radius: Add or remove curves.
Sometimes, you may need to adjust additional padding or margins depending on your layout- but for most Squarespace users, the above code does the trick.
Final Thoughts
It may have taken me longer than expected to figure this out (thanks, Squarespace quirks), but once you know the trick, it’s super easy.
Whether you're styling your videos to match your brand or just want to add a little flair, this method works fast and clean.
