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.

score 38 · Answer 1 · edited Mar 07 '19 at 01:47

38

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>

edited Mar 07 '19 at 01:47

forresthopkinsa

1,339
1
24
29

answered Jun 03 '14 at 11:48

Wreeecks

2,186
1
33
53

3

i think better to remove mask-image prop from your example, it can bring misunderstanding. main props here are overflow, border-radius and transform – bonbonez Apr 04 '15 at 07:07
1

The border radius and overflow make perfect sense, but I feel like the transform needs some explanation. I've checked this in the current webkit browser versions and as far as I can tell it has no effect, what exactly does the rotation add? – DBS Feb 15 '16 at 10:22

score 21 · Answer 2 · answered Apr 05 '18 at 20:59

21

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

answered Apr 05 '18 at 20:59

Gregg

1,477
1
16
17

This trick made it work on iOS Safari for me. The transform must be applied to the masking element, be it the video itself or a surrounding div with rounded corners. – korkman Jul 06 '21 at 13:24

score 9 · Answer 3 · answered Jun 04 '11 at 21:40

9

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.

answered Jun 04 '11 at 21:40

robertc

74,533
18
193
177

+1 Thanks for the good explanation, although I didn't find a solution through your links. – Web_Designer Jun 05 '11 at 04:37
That was the key for me, putting 16/9 ratio, it works both Chrome and Firefox, if not it's giving weird rendering – Michael Lumbroso Nov 14 '16 at 14:01

score 7 · Answer 4 · answered Jan 10 '13 at 21:34

7

Unfortunately, Chrome and Safari do not support border-radius on <video> elements.

answered Jan 10 '13 at 21:34

Guil Hernandez

71
1
1

Jeff · Answer 5 · 2011-06-04T23:16:33.010

6

If all of your videos are the same size, you could use a CSS mask with an SVG file. If your videos are dynamically sized, that makes things more difficult... (edit: the SVG mask seems to automatically scale, so this solution should work)

e.g., you can add

-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)

to your .rc class and it should work in Chrome.

edit: this only seems to work if you remove your inline height and width declarations on your video... You can put them in your CSS, though.

http://jsfiddle.net/QWfhF/2/

edited Jun 04 '11 at 23:16

answered Jun 04 '11 at 22:55

Jeff

12,147
10
51
87

Your solution isn't working for me in Chrome 12. There are no rounded corners on either of the two elements (video or picture). – Web_Designer Jun 05 '11 at 04:46
Hmm perhaps I'm using a newer version: I'm on 12.0.742.77 beta, and it works. Screenshot @ http://www.cl.ly/3c0i2h1E1z3E1q24371y/o – Jeff Jun 05 '11 at 04:51
Also, did you remember to remove the inline height/width on the video? If not, the corners wont be rounded – Jeff Jun 05 '11 at 04:58
That's odd I'm on 12.0.742.77 beta as well. But I'm on windows 7 and your obviously on a mac. Maybe there's different syntax for windows and mac? ...But that's just wrong. My Screenshot: http://i.imgur.com/Htrth.png – Web_Designer Jun 05 '11 at 05:13
That's bizarre! I imagine the features shouldn't differ by Windows/Mac, but perhaps there's a bug in the Windows version. Also, what's beta-m? Perhaps that's the difference... In any case, sorry I couldn't help! – Jeff Jun 05 '11 at 05:23
aha @ http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/0c9baf4a5bd3c4fc?pli=1 – Jeff Jun 05 '11 at 05:30
This: http://jsfiddle.net/inquisitive_web_developer/jbTrq/ ...is displayed like this: http://i.imgur.com/lfQTD.png ...in Chrome 12.0.742.77 beta on Windows 7. – Web_Designer Jun 05 '11 at 14:53

score 4 · Answer 6 · edited Dec 11 '18 at 16:04

4

Try this. It should work.

-webkit-mask: url(mypath/mask.png);

where the mask.png should be a rounded corner shape. Did this quick with a circle. [url removed]

edited Dec 11 '18 at 16:04

MSpruijt

13
5

answered May 06 '13 at 22:05

Benjamin

41
2

score 4 · Answer 7 · 2019-10-03T05:57:48.240

Update October 2019

Border-radius for video now works on firefox, chrome and safari on mac, android and iOS.

Chrome Mobile Bug - if some Chrome android browsers cause you problems with rounding just add the following property to the video css. It's just a 1px transparent image which solves the chrome border-radius rendering bug for android phones

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Test it here - https://jsfiddle.net/hzd4vec2/

<!DOCTYPE html>
<html>
<head>
<title>Border-radius test</title>

<style type="text/css">

    body{
        background: #000000;
        margin: 0px;
    }

    #capsule{
        height: 600px;
        background: #000;
        border-radius: 1000px;
        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    }



</style>

</head>
<body>

    <video id="capsule" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" 
autoplay muted loop></video>
</body>
</html>

score 4 · Answer 8 · answered Jul 26 '21 at 17:47

4

Tested on Chrome, Firefox, and Safari:

CSS:

.rounded {
    border-radius: 20px; 
    overflow: hidden;
    -webkit-transform: translateZ(0);
}

HTML:

<div class="rounded">
    <video>.....</video>
</div>

answered Jul 26 '21 at 17:47

Sasha Shpota

9,436
14
75
148

score 2 · Answer 9 · answered Jun 04 '11 at 18:14

2

remove the width property http://jsfiddle.net/vDPW2/10/

answered Jun 04 '11 at 18:14

SRN

2,418
3
22
26

score 2 · Answer 10 · answered Jun 04 '11 at 18:19

2

Try read this: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/

And for CSS would be:

video{
    width:320px;
    -moz-border-radius:40px;
    -webkit-border-radius:40px;
    border-radius:40px;
    overflow:hidden;
}

answered Jun 04 '11 at 18:19

ZeroSuf3r

1,961
8
25
36

This doesn't work (at least not in Chrome 12): http://jsfiddle.net/inquisitive_web_developer/vDPW2/31/ – Web_Designer Jun 04 '11 at 18:22

score 2 · Answer 11 · answered Jun 04 '11 at 18:56

This can be done with canvas and JavaScript at least (Introduction how to manipulate video frame data with canvas). You basically draw a new canvas, apply the video frame data there, then clip the rounded corners off. I created this quickly, so didn't check whether the anti-aliasing could have been improved, but at least it does the rounding. Performance wise, you can imagine this isn't really as good as applying CSS or something, but it should work on all canvas supported browsers at least.

   var video = document.getElementById("video");
    var c1 = document.getElementById("roundy");
    var ctx = c1.getContext("2d");

    video.addEventListener("play", function() {
        timerCallback();
      }, false);

var timerCallback = function() {
    if (video.paused || video.ended) {
      return;
    }
    computeFrame();

    setTimeout(function () {
        timerCallback();
      }, 0);
  };

var computeFrame = function() {

        var w = 480;
    var h = 320;
    var r = 20;
    ctx.clearRect(0,0,w,h);





    ctx.globalCompositeOperation = 'destination-atop';

   ctx.fillStyle = "#09f";
  roundRect(ctx, 0,0,w,h,r,true,false);
      ctx.drawImage(video, 0, 0, w, h);



    return;
  }
    // http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html

    function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
  if (typeof stroke == "undefined" ) {
    stroke = true;
  }
  if (typeof radius === "undefined") {
    radius = 5;
  }
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  ctx.clip(); 
}

Example: http://jsfiddle.net/niklasvh/aFcUh/ (play the top video to view the effects on the bottom canvas one).

Whether your script works or not (it doesn't seem to work in Chrome 12), very long javascripts are not my favorite, especially when combined with lack of support for HTML5 canvas in IE. And yes I know IE doesn't support HTML5 video either, but I have a fallback. Thanks anyways! — Web_Designer, Jun 04 '11 at 19:13
What's the error you get if any? Does the canvas display anything when playing the video? The lack of support for canvas in IE should be irrelevant, since it won't play any sort of HTML5 video anyway, so any sort of browser side rounding you wish to apply, won't work on them. — Niklas, Jun 04 '11 at 19:22
I take back my previous statement that your code doesn't work in Chrome. When I had tried your code I made my own example (must have done it wrong). But yes, your example does work in my webkit browser (chrome 12). It is bulky js (IMO), but if rounded corners are needed I guess it could be a solution if paired with browser detection so that it doesn't clog up other browsers. — Web_Designer, Jun 05 '11 at 04:35
Yes, it certainly isn't a very efficient way of achieving the look. — Niklas, Jun 05 '11 at 09:26

score 1 · Answer 12 · answered Nov 07 '13 at 22:42

1

class="img-rounded" from bootstrap works fine for me using video.js

 <link href="//vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
 <script src="//vjs.zencdn.net/4.3/video.js"></script>

 <video id="example_video_1" class="video-js vjs-default-skin img-rounded"
    controls preload="auto" width="640" height="264">
    <source src="http://example.com/test_video.mp4" type='video/mp4'/>
 </video>

answered Nov 07 '13 at 22:42

evdama

2,166
1
16
17

img-rounded did the trick for me using bootstrap, nothing else was needed. – Will Bowman Dec 11 '14 at 04:51

Sergey · Answer 13 · 2018-07-25T17:08:58.283

Following solution works on my site with video tag and youtube embedded

.video{
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    height: 480px; /*it can deleted, if height is not restricted*/
    width: 640px; 
}

<div class="video">
    <iframe width="640" height="480" src="https://www.youtube.com/embed/..." frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="video">
    <video controls>
        <source src="..." type="video/mp4">
    </video>
</div>

UPD I had issue with youtube embedded iframe, container .video had height bigger 3px than its child iframe. And it made bottom corners a little bit incorrect. Just add font-size: 0 to .video class, fixed the problem

.video{
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    font-zie: 0
    height: 480px; /*it can deleted, if height is not restricted*/
    width: 640px; 
}

score 1 · Answer 14 · answered Jan 15 '19 at 11:36

1

I got this working for modern browsers with a parent (div) and the video inside. The parent has the border-radius: 8px and overflow: hidden. The video just needs display: grid to make the bottom edged rounded too.

answered Jan 15 '19 at 11:36

karlludwigweise

101
1
3

score 0 · Answer 15 · answered Apr 05 '13 at 18:14

I accomplished this using only CSS and a sprite image. This works in all browsers and does not require any JavaScript.

By surrounding the video with a div that is set to position: relative; you can place four divs in each of the four corners on top of the video using z-index and absolute positioning. Then place a sprite background image into each of the four corners that rounds the edge with the same color as the background color. Essentially covering the video with an image of a corner.

Here is a working example: http://jsfiddle.net/476tC/

The code for it also located below:

<style>
    video {
        width: 100%;
        height: auto;
    }

    .corner-frame {
        width: 100%;
        position: relative;
    }

   .corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
        width: 10px;
        height: 10px;
       position: absolute;
       background: url(http://i45.tinypic.com/5l520j.png) no-repeat;
       z-index: 1;
   }

   .corner-top-left { top: 0; left: 0; background-position: 0 0 ; }
   .corner-top-right { top: 0; right: 0; background-position: -10px 0 ; }
   .corner-bot-left { bottom: 4px; left: 0; background-position: 0 -10px ; }
   .corner-bot-right { bottom: 4px; right: 0; background-position: -10px -10px ; }
</style>

<div class="corner-frame">
    <video controls>
        <source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes.mp4" type="video/mp4">
        <source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes-portable.ogv" type="video/ogg">
    </video>
    <div class="corner-top-left"></div>
    <div class="corner-top-right"></div>
    <div class="corner-bot-left"></div>
    <div class="corner-bot-right"></div>
</div>

The sprite I created is only 20px x 20px and only rounds about 10px off the corner. If you would like to download the photoshop file and change the corner color or increase the size you can get the PSD file here: http://www.mediafire.com/?bt9j0vhsmzfm9ta

score 0 · Answer 16 · answered May 28 '20 at 18:44

As has been said border-radius does work in Firefox and Chrome depending on video type. I found it necessary to style using video, video::first-child for mp4. There is probably an inner layer(border) to mp4s. I did the first-child bit when I noticed ogg and webm were working whereas mp4 was not.

Onur Altuntas · Answer 17 · 2020-10-18T16:10:10.360

0

remove width="320" height="240"from inside of video tag and add to your css file .rc{width:320; height:240; outline:none; border-radius:15px } I hope this solution is work for you :)

edited Oct 18 '20 at 16:10

answered Oct 18 '20 at 16:00

Onur Altuntas

111
1
3

Shahriar · Answer 18 · 2022-07-27T17:37:46.103

0

2022 answer: Set the video height to max-content and simply use the border-radius:

video {
    height: max-content;
    border-radius: 16px;
}

A better alternative is to use object-fit (plus object-position) if you don't want to mess with the height:

video {
    object-fit: cover; /* so the video covers all the available space */
    object-position: center; /* not required */
    border-radius: 16px;
}

edited Jul 27 '22 at 17:37

answered Jul 27 '22 at 16:53

Shahriar

1,855
2
21
45

score 0 · Answer 19 · answered Jan 14 '23 at 18:19

One attribute does the job and can be added as a class directly on the video tag. The class would look like:

.video-mask
{
    border-radius: 3em;
}

If you add these properties:

max-width: 100%;
display: block;
margin: auto;
padding: 1em;

You will have a centered responsive rounded video that resizes to keep its aspect ratio and stays in the middle. None of these are strictly necessary though.

rounded corners on html5 video

19 Answers19

Linked

Related