CSS border-radius on a parent container is affecting the child - html

Question

I have a border-radius: 20px on a parent container that is breaking the styles of the button child. Look at this jsfiddle:
https://jsfiddle.net/fku9cLoe/2/
Now try to remove the border-radius on the .preview-container, you will see that the border radius on the button is fixed and the corners are not overflowing anymore.
How is this possible? Looks almost like a bug in CSS.
Looks like it gets fixed when I remove the backdrop-filter: blur(10px); but that is not the solution because it's essential to the design of the button.
.preview-container {
width: 300px;
height: 300px;
display: flex;
justify-content: stretch;
position: relative;
max-width: 100%;
overflow: hidden;
background: black;
border-radius: 20px;
}
.preview {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
button {
position: relative;
font-family: inherit;
font-size: 18px;
border-radius: 40em;
width: 8em;
height: 3em;
z-index: 1;
color: white;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18);
}
button .text {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 3em;
border: none;
background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
z-index: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
button .blob {
position: absolute;
z-index: -1;
border-radius: 5em;
width: 5em;
height: 5em;
background: purple;
top: -20px;
left: -20px;
}
button .blob:nth-child(2) {
left: 20px;
top: 0;
width: 10em;
background: #ff930f;
}
<section class="preview-container">
<div class="preview">
<button> <span class="text">Button</span>
<span class="blob"></span>
<span class="blob"></span>
</button>
</div>
</section>

Answer 1

the issue is due to backdrop-filter: blur(10px) apply on button .text as say in the doc the effect is done below the element https://developer.mozilla.org/fr/docs/Web/CSS/backdrop-filter
so in your case the effect is done on button .text which have no border-radius and have a rectangle shape
to solve your issue apply the border-radius on button .text element to give it the same shape as his container
.preview-container {
width: 300px;
height: 300px;
display: flex;
justify-content: stretch;
position: relative;
max-width: 100%;
overflow: hidden;
background: black;
border-radius: 20px;
}
.preview {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
button {
position: relative;
font-family: inherit;
font-size: 18px;
border-radius: 40em;
width: 8em;
height: 3em;
z-index: 1;
color: white;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18);
}
button .text {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 3em;
border: none;
background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
z-index: 1;
border-radius: 40em;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
button .blob {
position: absolute;
z-index: -1;
border-radius: 5em;
width: 5em;
height: 5em;
background: purple;
top: -20px;
left: -20px;
}
button .blob:nth-child(2) {
left: 20px;
top: 0;
width: 10em;
background: #ff930f;
}
<section class="preview-container">
<div class="preview">
<button> <span class="text">Button</span>
<span class="blob"></span>
<span class="blob"></span>
</button>
</div>
</section>