box-shadow inset + border radius bug

by Kitana

HTML

<div class="parent">
    <div class="child buggy">
      with border-radius - visible edge
    </div>
    <div class="child usual">
      without border-radius - ok
    </div>
</div>

CSS

.parent {
  display:flex;
  background-color: white;
  height: 100vh;
  justify-content: space-around;
  padding-top: 20px;
}

.child {
  width:150px;
  height: 150px;
  background-color: blue;
  box-shadow: inset -10px 0 0 10px wheat;
  color: white;
  display: flex;
  font-size: small;
  align-items: center;
  padding: 0 15px;
}

.buggy {
  border-radius: 10px;
}

.usual{
  border-radius: 0;
}