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 >w3wiki</ 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 > |
Output:
How to add Rounded Corners on Video in HTML ?
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.