rounded corners on html5 video

Solution 1:

Create a div container with rounded corners and overflow:hidden. Then place the video in it.

<style>
.video-mask{
    width: 350px;
    border-radius: 10px; 
    overflow: hidden; 
}
</style>


<div class="video-mask">
    <video></video>
</div>

Solution 2:

We have a video playing with rounded corners and a drop shadow and it's as simple as:

border-radius: 22px; overflow: hidden; -webkit-transform: translateZ(0); box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);

The key is the -webkit-transform: translateZ(0). This line of code tells the browser to render on the GPU instead of with the

Tested and working as of Safari 11, Chrome 65, Firefox 59, Edge Win 10 & IE 11

Solution 3:

It works in Firefox as long as you set the appropriate 180px height for the 320px width video (16:9 aspect ratio) - otherwise the curved borders aren't visible because they're outside the frame of the video.

There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one or this one specifically about the video element.