How to add Rounded Corners on Video in HTML ?

Last Updated : 30 Jan, 2024

Adding Rounded Corners to a video involves modifying the video frame’s corners to have a rounded appearance instead of sharp edges. Adding rounded corners to the video can ensure it fits seamlessly into the overall design.

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;

Border-radius shorthand Property

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: Illustration of 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"> 
    
    <!-- Applying CSS Style to the HTML Component -->
    <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> 
    <title>Rounded Corners</title> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
    <h3>Rounded video Corners using 
        border-radius short-hand Property 
    </h3> 
  
    <!-- Video element with rounded corners -->
    <video width="300px" 
           height="150px" controls> 
  
        <!--Specify the path of your video-->
        <source src="your-video.mp4" 
                type="video/mp4"> 
    </video> 
</body> 
  
</html>

Output:

brsh

CSS Property for each corner

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: Illustration of rounded corners on video using 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"> 
    
    <!-- Applying CSS Style to the HTML Component -->
    <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> 
    <title>Rounded Corners</title> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
    <h3>Rounded video Corners 
    </h3> 
    <p> 
       Using border-top-left-radius 
       and border-bottom-right-radius 
       property 
    </p> 
  
    <!-- Video element with rounded corners -->
    <video width="300px"
           height="150px" controls> 
  
        <!--Specify the path of your video-->
        <source src="your-video.mp4" 
                type="video/mp4"> 
    </video> 
</body> 
  
</html>