0

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>

9
  • Looks like the border radius is applied just fine in the snippet you posted
    – irowe
    Jun 23, 2020 at 16:21
  • @irowe Maybe it's just my browser.
    – Max
    Jun 23, 2020 at 16:23
  • Because I am using safari, and I haven't updated to the latest version.
    – Max
    Jun 23, 2020 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, 2020 at 16:24
  • I am on Safari On MacOS Catalina
    – Max
    Jun 23, 2020 at 16:27

3 Answers 3

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

-1

Try clearing your browsing history.

-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.