google chrome - rounded corners on html5 video

Question

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.

Answer 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>