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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.