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

by Crawford is led by Sam Crawford, a multi-award-winning Squarespace website designer with 700+ sites launched for clients in over 30 countries. He builds fast, mobile-friendly Squarespace 7.1 websites designed for SEO, clear structure, and conversion.

As a Squarespace Expert, Enterprise Partner, Circle Member, and community speaker, Sam is known for pushing the platform’s limits. With 200+ reviews, clients highlight by Crawford’s clarity, precision, and real-world results like higher rankings and stronger lead generation.

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