rounded corners on html5 video

Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?

Check out this example. it's not working.

How do you round the corners of an iframe?

The way to go is wrapping the iframe in a circular div as other users suggested. The only difference being that you have to add an additional style position:relative to the wrapper for it to work in Chrome browser. Show activity on this post. Wrapping the <iframe> in a <div> should work.

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>