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

[JC671]

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:

<style>
video {
display: block;
margin: 0 auto;
width: 60%;
height: 50%;
}
</style>
<video autoplay loop playsinline muted>
<source src="videolinkexample.mp4">
</video>

[Moeed]

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

[Liam · Accepted solution]

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!

[JC671]

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:

<style>
 
video { 
 
display: block;
margin: 0 auto;
width: 65%;
height: 50%;
border-radius: 15px; 
}

/* Tablet styles */
@media (max-width: 1023px) {
    video {
        width: 90%;
        height: 55%;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    video {
        width: 90%;
        height: 60%;
    }
}
 
</style>
 
 
<video autoplay loop playsinline muted> 
<source src="link.mp4">
</video>

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; 
}

[JC671]

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;
}