How to add a border around a video on Squarespace

If you use video blocks on your Squarespace website then one thing you might want to do is add a border to your videos. 

Borders can help to keep your website looking fresh, make your videos stand out and help to guide the user through your content. 

So if you want to add a border to your videos on Squarespace, keep reading to find out how to do exactly that. 

Watch the video

Check out the YouTube video below 👇

First things first, add your video block to your website. Once your video has been added to your webpage, navigate to Design > Custom CSS.

Within the CSS panel you need to add some new lines and copy and paste the below code:

.video-player {

border: solid 2px #000000 !important;

}

You can then customise this code to get the border you want. You can make it thicker by using a higher px and you can change the colour of the border by adding any colour you like. You can add hex codes, HSL codes etc…whatever colour you want the border to be.

The solid in the above code refers to the line being a solid line. You can however replace this with dotted to create a dotted line border around your video.

---

📩 Join the inner circle to get exclusive code updates

---

Other border designs you can opt for include grooved, double and dashed so be sure to have a play around to figure out exactly which border you want for your video block.

So all that’s left for you to do is go away, add the code to your Squarespace website and edit it accordingly in order to achieve your desired border effect. Oh, and don’t forget to let me know how you get on!

---

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?