CSS for Rounded Corners of Uploaded Videos in Squarespace 7.1
In today’s web-design industry, it’s all about the little things, like rounded corners and a clean, media-rich site, that set your site above the rest. One enhancement would be rounded corners on uploaded videos in Squarespace 7.1.
Squarespace video uploads are immediately converted to standard rectangular format. But if your cards are soft and your buttons are rounded, or if your visuals are all curves, it’s only natural for your videos to follow suit. Thankfully, using just a few lines of custom CSS, you can achieve that same polished, rounded look for your videos in general or one particular video block only.
Why Use Rounded Corners for Videos?
Helps integrate the brand into media and layout
Fits current UI trends, takes the edge off squared corners
Generates a line from text, rounded buttons, images, or containers.
Embedded and native videos in card-based design feel like videos as a code part of the design.
How to Apply Rounded Corners to All Videos on Your Site
If you want all video blocks (uploaded and embedded) to have rounded corners throughout your entire Squarespace 7.1 site, you can use this universal CSS:
Step 1: Add Global CSS
From your Squarespace dashboard, go to:
Pages → Custom Code → Custom CSSPaste this CSS snippet:
/* Rounded corners for all video blocks */
.sqs-native-video, .sqs-video-wrapper{
border-radius: 20px; /* Adjust the radius value */
overflow: hidden;
}
How to Apply Rounded Corners to a Specific Uploaded Video Only
If you only want to round the corners of one particular uploaded video (such as a homepage intro or testimonial), you’ll need to target that video block’s unique ID.
Step 1: Identify the Block ID
Go to the page where your video is located.
Right-click on the video and select Inspect (or open Developer Tools).
Locate the <div> wrapping the video. You’ll see something like:
<div id="block- YOUR BLOCK ID " class="sqs-block sqs-block-video"></div>
Copy the entire ID — in this case, block-YOUR BLOCK ID
Step 2: Add Targeted CSS
Now go back to Pages → Custom Code → Custom CSS, and paste:
/* Rounded corners for a specific uploaded video */
#block-YOUR-BLOCK-ID .sqs-native-video,
#block-YOUR-BLOCK-ID .sqs-video-wrapper{
border-radius: 16px; /* Customize the curve */
overflow: hidden;
}
You can safely change 16px to 8px, 24px, or even 50%, depending on the effect you're aiming for.
Final Design Tip
Pair your rounded videos with soft shadows or card backgrounds:
#block-YOUR-BLOCK-ID .sqs-native-video,
#block-YOUR-BLOCK-ID .sqs-video-wrapper{
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
border-radius: 16px;
overflow: hidden;
}
Wrapping Up
Applying rounded corners to uploaded videos in Squarespace 7.1 is a subtle, stylish upgrade that improves visual harmony, especially on modern, mobile-optimized websites. Whether you want to update every video globally or highlight a single featured video, these CSS techniques give you total design control.
If you're aiming for a premium look with minimal effort, this simple tweak is a must-have in your customization toolkit.
Frequently Asked Questions
-
Curved corners create a softer, trendier aesthetic that goes well with similarly rounded elements across your site, such as buttons, images, and cards. It gives you a more consistent branding and improves the overall feel of your website, making it feel more polished and thought-out. This becomes critical on mobile.
-
No, Squarespace 7.1 does not have a native toggle or style setting to round the corners of uploaded or embedded videos. All video blocks come with default rectangles without custom CSS.
-
Yes. The. The sqs-native-video selector is aiming for Squarespace’s native video player blocks, which are utilized for uploading . MP4 files and embedded videos from supported providers (YouTube and Vimeo), as long as they’re added by using the Video Block.
-
Right-click on the video you want to target → Click “Inspect” (in Chrome or Safari) → Look for a parent <div> with an ID that starts with block-. Copy the full ID (e.g., block-yui_3_17_2_1_1716988846791_12345) and use it in your custom CSS selector.
-
Yes. You could override the desktop radius value with a smaller or custom value that makes sense for smaller screens, using a media query like @media screen and (max-width: 640px) so the design doesn't feel as bottom-heavy on smaller screens.
