HTML video tag: rounded corners are pixelated

I am trying to show a video with rounded corners, but on the bottom corners, it is pixalated (as showen on the attached screenshot).

This is the HTML code I have tried:

<div class="container1">
      <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1" onclick="controlsChangeVideo1()"></video>
</div>

And this the CSS:

.container1 {
    margin-left: 50px;
    margin-right: 425px;
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
}

Solution

You can try this code for a more precise result.

HTML `

<div class="container1">
    <div class="video-container">
        <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1" onclick="controlsChangeVideo1"></video>
    </div>
</div>

CSS `

.container1 {
    margin-left: 50px;
    margin-right: 425px;
    margin-top: 50px;
}

.video-container {
    border-radius: 20px;
    overflow: hidden;
}

.video1 {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px; /* Adjust this value as needed */
}