Set Rounded Border for a Video

How to Set a Rounded Border for Your Video

Follow these steps below to add a rounded border for your video in GemPages v7.

Step 1: Access the GemPages Editor

• From your Shopify admin, go to the GemPages Builder app > Pages.
• Click on the page that you want to customize the video’s corner to open the editor.

• If you prefer to add the rounded video to the new page, click the Create new page button.

Step 2: Add a video using the Video Element

Once you enter the editor, enter the video in the search bar. Then, drag and drop the Video element from the left sidebar to the target position on your page.

Click on the video to open its settings. Under the Settings tab, modify the Video source, Video configure, Size, and Shape for your video.

Step 3: Set a rounded corner for the video

Scroll down to the Shape section under the Settings tab.

Click on the “Add…” in the Corner field to open the corner setting.

Under the Radius field, click on the down arrow icon and select the Round option from the dropdown. The radius will be set to 8 as the default. 

• If you prefer the video’s corner shape to be more rounded, enter an exact number in the box.

• If you want to set a different radius for each corner, click on the icon next to the box to open the detailed panel.

Additional Styling Options

You can further style the Video element by combining rounded corners with:

• Border: Add a border with custom thickness and color
• Shadow: Apply an outer shadow to create visual depth

These options are also available within the Shape section.

FAQs

1. Can I apply different corner radius values to each corner?

Currently, the corner radius applies to all four corners equally. Custom values for individual corners are not supported yet.

2. Why don’t the rounded corners show up on live view?

Make sure there are no conflicting styles or parent elements overriding the border radius. Also, double-check that the corner radius is not set to 0.