rounded corners on html5 video

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 Contents:

  1. Background color not showing in print preview
  2. Blurry text after using CSS transform: scale(); in Chrome
  3. CSS Border radius not trimming image on Webkit
  4. Chrome / Safari not filling 100% height of flex parent
  5. How can I force WebKit to redraw/repaint to propagate style changes?
  6. css transform, jagged edges in chrome
  7. HTML5 video will not loop
  8. Webkit CSS to control the box around the color in an input[type=color]?
  9. Bug with transform: scale and overflow: hidden in Chrome
  10. HTML 5 Video “autoplay” not automatically starting in CHROME
  11. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  12. webkit-transform overwrites z-index ordering in Chrome 13
  13. content attribute of img elements
  14. Disable download button for Google Chrome?
  15. How to access the webpage DOM rather than the extension page DOM?
  16. Is there a way to get the XPath in Google Chrome?
  17. What is a user agent stylesheet?
  18. When running WebDriver with Chrome browser, getting message, “Only local connections are allowed” even though browser launches properly
  19. How to apply specific CSS rules to Chrome only?
  20. How to save CSS changes of Styles panel of Chrome Developer Tools?
  21. chrome extension mv3 – Modularize service worker js file
  22. Debugging WebSocket in Google Chrome
  23. Favicon not showing up in Google Chrome [duplicate]
  24. :active pseudo-class doesn’t work in mobile safari
  25. Set Webkit Keyframes Values Using Javascript Variable
  26. How to use CSS (and JavaScript?) to create a blurred, “frosted” background?
  27. JsPDF – Not allowed to navigate top frame to data URL
  28. Firing a keyboard event on Chrome
  29. How can I get the CSS Selector in Chrome?
  30. Remote Debugging for Chrome iOS (and Safari)
  31. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  32. inject CSS to a site with webview in android
  33. How to clear basic authentication details in chrome
  34. Google chrome a:visited background image not working
  35. What makes the text on a element vertically centered?
  36. font-face with wrong MIME type in Chrome
  37. Font-size issues comparing chrome and Firefox
  38. What exactly is the `#:~:text=` location hash in an URL? [closed]
  39. navigator.clipboard is undefined
  40. How to access the webpage DOM/HTML from an extension popup or background script?
  41. Stop CSS transition from firing on page load
  42. HTML book-like pagination
  43. Chrome: Automatic shift of web elements
  44. How can you hide the arrow that is displayed by default on the HTML5 element in Chrome?
  45. Creating Google Chrome shortcut with –disable-web-security
  46. Chrome does not expand flex parent according to children’s content [duplicate]
  47. Is it possible to inject a javascript code that OVERRIDES the one existing in a DOM? (e.g default alert function)
  48. Javascript / Chrome – How to copy an object from the webkit inspector as code
  49. Non-Authoritative-Reason header field [HTTP]
  50. Passing message from background.js to popup.js

Leave a Comment