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 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:
Design → Custom CSSPaste this CSS snippet:
/* Rounded corners for all video blocks */
.sqs-native-video{
border-radius: 12px; /* 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-yui_3_17_2_1_1716988846791_12345" class="sqs-block sqs-block-video"></div>
Copy the entire ID — in this case, block-yui_3_17_2_1_1716988846791_12345
Step 2: Add Targeted CSS
Now go back to Design → Custom CSS, and paste:
/* Rounded corners for a specific uploaded video */
#block-yui_3_17_2_1_1716988846791_12345 .sqs-native-video{
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.
Bonus: Make It Responsive on Mobile
Want slightly smaller curves on mobile for better flow?
@media screen and (max-width: 640px) {
#block-yui_3_17_2_1_1716988846791_12345 .sqs-native-video{
border-radius: 10px;
}
}
Final Design Tip
Pair your rounded videos with soft shadows or card backgrounds:
#block-yui_3_17_2_1_1716988846791_12345 {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
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.
FAQ: Rounded Video Corners in Squarespace 7.1
1. Why should the corners of videos be round?
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.
2. Are video corners rounding native to Squarespace 7.1?
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.
3. Does this CSS apply to uploaded and embedded videos both?
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.
4. How can I get the unique block ID of a certain video?
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.
5. Is it possible to use different radius values for mobile?
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.
6. Is this CSS going to have an impact on performance/load times on mobile?
No. These are only superficial styling changes, and loading speed will remain the same. The CSS does not influence the file size and performance of the video; it only alters how the video looks.
7. Can I make a circular video with border-radius: 50%?
Not directly, although you can achieve the effect by using overflow: hidden or applying border-radius: 50%, provided you want the video to be rectangular instead of square. Handle it with care, and only if your layout is able to support it visually.
8. Best border-radius value to use?
That depends on the look you’re going for with your site:
Subtle modern look: 8px–12px
More sinuous cards and testimonials: 16px–24px
A stylized or playful look: 30px+ or even 50%
