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

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>
htmlcss


Solution 1:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeremy-denis

Related Questions