Element rounded corners leaking out to front when using overflow: hidden

Issue

I'm just trying to add rounded corners to the Video.js player by adding border-radius: 50px and overflow: hidden to its parent element, but there's a trace of the video player's background at its corners.

I tried to isolate the issue with minimal html and css in this demo: https://jsfiddle.net/4uj7as38/66/. I'd expect those black rounded corners from box2 to not show up since box1 is the exact same size and on top of it.

.container {
  border-radius: 50px;
  height: 200px;
  position: relative;
  overflow: hidden;
  width: 500px;
}

.box1 {
  background-color: white;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.box2 {
  background-color: black;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Is this a known CSS issue? Would you happen to know any clever workarounds?

Played around with box-sizing and try to overlay another div on top with another rounded borders, but the borders seem to merge together

Solution

Using mask instead of overflow: hidden should fix the issue. The aren't exactly the same but visually they should give you the same result

.container {
  border-radius: 50px;
  height: 200px;
  -webkit-mask: linear-gradient(#000 0 0); /* ADDED */
  width: 500px;
}

.box1 {
  background-color: white;
  height: 100%;
  position: relative;
  z-index: 1;
}

.box2 {
  background-color: black;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Answered By - Temani Afif