Remove iFrame Border on Squarespace

When you add an iFrame to Squarespace, for some reason it automatically adds an annoying (and ugly) border around it. 

I can’t tell you how much this annoys me but luckily, with just a couple of lines of code, you can remove it.

Watch the video

Check out the YouTube video below 👇

To remove the iFrame border, head to Website > Website Tools > Custom CSS and in your custom CSS box, add the following code:

iframe {

border: none;

}

If you find that this doesn’t remove the border, simply add important to the code like below:

iframe {

border: none !important;

}

And that really is it. Hit save and you’ll have removed the ugly border from around the iFrame on your Squarespace website.


📩 Join the inner circle to get exclusive code updates


Be sure to check out my YouTube channel for more simple Squarespace hacks.


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

How To Enable Tablet View on Squarespace

Next
Next

How to Host Your Podcast on Squarespace