How can I add border-radius to a video in HTML/CSS

Question

How can I add border-radius to the <video> tag.
This is what my video looks like right now:

(image is here: <a href="https://i.stack.imgur.com/izKz0.png")

I already tried doing the video tag with css but it doesn't change.

Here is the code:

/*CSS*/

video {
border-radius: 10px;
}

<!HTML!>

<div class="fp-player">
<center>
<div id="instructions">
  <video id="my_video_1" class="video-js vjs-default-skin" width="320" height="240"
      controls preload="none" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' poster="https://example.org/image.png">
    <source src="https://example.org/video.mp4" type='video/mp4' />
  </video>
  </center>
    </div>

Looks like the border radius is applied just fine in the snippet you posted — irowe, Jun 23 '20 at 16:21
Because I am using safari, and I haven't updated to the latest version. — Max, Jun 23 '20 at 16:24
What are you using? I've got Chrome 83 on MacOS and I can see the rounded corners in the snippet preview. It becomes a lot more obvious if I crank the border-radius up to 100px — irowe, Jun 23 '20 at 16:24
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Broswer_compatibility — irowe, Jun 23 '20 at 16:28
Does this answer your question? [rounded corners on html5 video](https://stackoverflow.com/questions/6238451/rounded-corners-on-html5-video) — irowe, Jun 23 '20 at 16:33
I am marking this as a duplicate of https://stackoverflow.com/questions/6238451/rounded-corners-on-html5-video, although an answer below also points out that https://stackoverflow.com/questions/7811719/adding-border-radius-for-embedded-youtube-video/7941820 could help you — irowe, Jun 23 '20 at 16:35
This might also be relevant: https://stackoverflow.com/questions/20037784/html5-video-border-radius-in-chrome-not-working?noredirect=1&lq=1 — irowe, Jun 23 '20 at 16:38

aparep7474 · Answer 1 · 2020-06-23T18:18:42.533

0

Wrap the video in a div and give it this styling,

div {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}

I found this answer at Adding border-radius for embedded YouTube video

edited Jun 23 '20 at 18:18

answered Jun 23 '20 at 16:27

aparep7474

79
7

score -1 · Answer 2 · answered Jun 23 '20 at 16:25

-1

Try clearing your browsing history.

answered Jun 23 '20 at 16:25

Mario Fuckan

34
2

score -1 · Answer 3 · answered Jun 23 '20 at 16:28

Here is an example that may help

HTML

<!DOCTYPE HTML>
<html>
<head>

<style>

#video1 {
border-radius:10px;
}

</style>

</head>
<body>

<video id="video1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none">
    <source src="https://example.org/video.mp4" type='video/mp4' />
  </video>

</body>
</html>

Add "border-radius:10px;" to the style of the video.

How can I add border-radius to a video in HTML/CSS

3 Answers3