How to add Rounded Corners on Video in HTML ?

Last Updated : 16 Oct, 2024

Adding Rounded Corners to a video involves modifying the video frame's corners to have a rounded appearance instead of sharp edges which gives the video a smoother, more refined appearance within a webpage's design.

Below are the two ways to add round corners on Video in HTML:

Table of Content

Using Border-radius Property to Add Round Corners on Video
Using CSS Property to Add Round Corners on Video

Syntax

/* Using border-radius short hand property */
border-radius: 20px;

/* Round each corner individually */
border-top-left-radius : 10px;
border-top-right-radius  : 50px;
border-bottom-right-radius  : 70px;
border-bottom-left-radius  : 90px;

1. Using Border-radius Property to Add Round Corners on Video

To round the corners of the video, we have used the border-radius shorthand property. To achieve rounded corners for the <video> element, we set the border-radius to 10px. The border-radius property can be defined with one, two, three, or four values. It serves as a combination of four distinct properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius.

Example: This example demonstrates the rounded corners on video using border-radius shorthand property.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border radius shorthand Property</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        * {
            font-family: 'Poppins', sans-serif;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
        }

        h2,
        h3 {
            color: green;
            text-align: center;
        }

        video {
            border-radius: 10px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <h3>Rounded video Corners using
        border-radius short-hand Property
    </h3>
    <video width="300px" height="150px" controls>

        <source src="your-video.mp4" type="video/mp4">
    </video>
</body>

</html>

Output

2. Using CSS Property to Add Round Corners on Video

Set the border-top-left-radius and border-bottom-right-radius properties to the <video> element. We can achieve the desired rounded effect for the corners of the <video> element. Unlike the border-radius shorthand, this method involves individually specifying the radius for the top-left and bottom-right corners.

Example: This example demonstrates the rounded corners on video using border-top-left-radius and border-bottom-right-radius Property.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded Corners</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        * {
            font-family: 'Poppins', sans-serif;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
        }

        h2,
        h3,
        p {
            color: green;
            text-align: center;
        }

        video {
            border-top-left-radius: 40px;
            border-bottom-right-radius: 40px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <h3>Rounded video Corners
    </h3>
    <p>
        Using border-top-left-radius
        and border-bottom-right-radius
        property
    </p>
    <video width="300px" height="150px" controls>

        <source src="your-video.mp4" type="video/mp4">
    </video>
</body>

</html>

Output

roundend-border-radius — Using CSS Property

How to Make a Layout with Rounded Corners in Android?

vivekchaudharyy

Improve

Article Tags :

How to add Rounded Corners on Video in HTML ?

Syntax

1. Using Border-radius Property to Add Round Corners on Video

2. Using CSS Property to Add Round Corners on Video

Similar Reads

Thank You!

What kind of Experience do you want to share?