Curve the edges of a video block

Give your Squarespace video blocks a sleek, modern look by rounding the edges. Customize the corner radius to match your site’s style and create a polished, cohesive design. Follow these quick steps to get started!

NOTE: This code currently only works for standard pages, it won't work on blogs or events pages.

---

Step 1: Add Custom CSS in Squarespace

1. Go to Design > Custom CSS in your Squarespace site editor.

2. Paste the following CSS into the editor

3. Save your changes.

/* Ensure the container has rounded corners and hides overflow */
#YOUR-BLOCK-ID {
  border-radius: 25px !important; /* Adjust for rounding */
  overflow: hidden !important;
  position: relative;
}

/* Target the custom featured image */
#YOUR-BLOCK-ID img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Ensure the image covers the container */
  border-radius: 15px !important; /* Match the container rounding */
  position: absolute;
  top: 0;
  left: 0;
}

---

Step 2: Upload a custom featured image

1. Navigate to the page where your video block is located. Click on the Edit button, then select the video block you want to customise.

2. Go into the settings of the video block.

3. Scroll down to Custom featured image and toggle ON.

4. Upload your image

5. Click outside of the settings pop-up and then save your changes.