rounded corners on html5 video

google-chrome webkit html5-video css
Web_Designer picture Web_Designer · Jun 4, 2011 · Viewed 43.1k times · Source

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

Wreeecks picture Wreeecks · Jun 3, 2014

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>

Related questions

JavaScript: Is there a way to get Chrome to break on all errors?

I am looking for an equivalent in Chrome to the "break on all errors" functionality of Firebug. In the Scripts tab, Chrome has a "pause on all exceptions", but this is not quite the same as breaking on all errors. …

Read More
Get the real width and height of an image with JavaScript? (in Safari/Chrome)

I am creating a jQuery plugin. How do I get the real image width and height with Javascript in Safari? The following works with Firefox 3, IE7 and Opera 9: var pic = $("img") // need to remove these in of case img-element has …

Read More
Background color not showing in print preview

I am trying to print a page. In that page I have given a table a background color. When I view the print preview in chrome its not taking on the background color property... So I tried this property: -webkit-print-color-adjust: …

Read More