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 👇

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

  1. Log into your Squarespace dashboard.

  2. Navigate to Design > Custom CSS.

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.


📩 Join the inner circle to get exclusive code updates


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.


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

Where You Can Find Your Mailing List on Squarespace [Hidden Menu]

Next
Next

Add a Background to Form on Squarespace