Chrome border clipping bug

The child element does not have its corners rounded properly when a css filter is applied

by swordys

HTML

<div class="card">
  <div class="full">
    This div should have rounded corners too.
  </div>
</div>

CSS

.card{
  /* Critical CSS */
  overflow: hidden;
  border-radius: 10px;
  
  /* Removes hidden corners in Chrome */
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
  
  background: gray;
  width: 200px;
  height: 200px;
}

.card::before{
  content: '';
  position: absolute;
}

.full{
  background: black;
  color: white;
  width: 100%;
  height: 100%;
}