How to Add a Border Radius to Images & Videos on the Squarespace Instagram Block

If you're building a polished website in Squarespace 7.1, design consistency matters.

Rounded corners on images.
Rounded form blocks.
Rounded cards and containers.

But then you add an Instagram Block…

And everything is sharp-cornered.

Here’s the reality:

Squarespace does NOT support border radius for Instagram Block items — for images OR videos.

There’s no built-in setting for it.
No design panel toggle.
No native styling control.

If you want rounded Instagram items, you need custom CSS.

Here’s how to fix it.

Watch the Video 👇

The Problem

By default, the Squarespace Instagram Block:

• Does not allow border radius styling

• Applies flat edges to both images and videos

• Ignores your surrounding design aesthetic

If the rest of your section has rounded 20px corners and your Instagram grid doesn’t, it immediately looks disconnected.

And because both images and videos are rendered differently under the hood, you have to explicitly target both.

The Solution: Custom CSS Workaround

To apply a border radius to ALL Instagram Block items (images + videos), paste the following into:

Design → Custom CSS

/* Instagram Block – Ensure videos and images inherit border radius */

div.instagram-block .slide,

div.instagram-block .slide a {

border-radius: 15px !important;

overflow: hidden !important;

}

/* Target video layers specifically */

div.instagram-block .slide video,

div.instagram-block .slide iframe,

div.instagram-block .slide .video-fill,

div.instagram-block .slide .sqs-video-overlay {

border-radius: 15px !important;

}

That’s it.

This forces both image and video items to inherit the same border radius and ensures overflow is properly clipped.

Why This Detail Matters

Design cohesion builds trust.

If you’re using:

• 20px rounded form blocks

• Rounded image cards

• Soft UI elements throughout your brand

But your Instagram Block stays sharp?

It feels unfinished.

This workaround restores visual harmony and keeps your design language consistent across every element on the page.

Final Thoughts

Squarespace is powerful — but it doesn’t always give you granular styling control.

When native settings fall short, custom CSS bridges the gap.

This is one of those small refinements that makes a template feel custom.

---

Need Professional Help With Your Squarespace Site?

If this update has you thinking about refreshing your site, improving your mobile experience, or tightening your brand storytelling, I’d love to help.

I’m Travis Vance, a Squarespace Circle Platinum Partner and Marketplace Expert who has built 125+ custom Squarespace sites across industries—from nonprofits and creatives to e-commerce and high-growth service businesses.

👉 See my portfolio: https://www.coyotemooncreative.com
👉 Book a strategy call: https://www.coyotemooncreative.com/contact

Let’s take your site from a yip to a howl. 🐺

---

Newsletter Signup

Sign up for my newsletter to receive detailed Squarespace design tutorials delivered to your inbox monthly. Get practical Squarespace design tips, as well as digital marketing strategies to grow your online business.

---

Want More?