How to round corners of videos? (Dawn theme, custom liquid)

Retired Boards Appdev Store Design
, ,
1

My site is using custom liquid to display videos and I’d like the corners to be rounded by 10px.

Is that possible to implement somehow? Thank you in advance for any help or feedback.

Example of video custom liquid:
2

Hey @JC671
Kindly share your Store URL and Password if enabled

3

Hi JC671,

To add rounded corners to elements, you’d be using the CSS border-radius property. You can test different values for this property to see which would work best for your use case.

Hope this helps!

1 Like
4

Thank you again, Liam!

For those wondering, I simply added this line to the CSS portion of custom liquid:

border-radius: 15px;

So now it looks like:

You can also add border-radius to the base.css file to round corners of Shopify’s video section, for example,

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 10px; 
}
5

An even better solution to adding border radius to photos and videos in Shopify theme settings is to paste this code into the Custom CSS section:

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  border-radius: 10px;
}