Угловой элемент div не заполняет родительский элемент div с углом радиуса

Question

Мой ребенок div не может заполнить угол родительского div с помощью border-radius.

См. Верхний правый угол этой картинки

.outer {
  border-radius: 20px;
  background: red;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 600px;
  z-index: 10;
  border: solid 1px white;
}
.corner {
  border-radius: 0 0 0 20px;
  background: white;
  padding: 14px 20px;
  position: absolute;
  right: -4px;
  top: -4px;
}

<div class="outer">
  <div class="corner">Corner Element
  </div>
</div>

Есть идеи или обходные пути?

Answer 1

Вы можете добавить небольшой отступ и сделать фон для покрытия только содержимого.

.outer {
  border-radius: 20px;
  background: red content-box;
  padding:1px;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 600px;
  z-index: 10;
  border: solid 1px white;
}
.corner {
  border-radius: 0 0 0 20px;
  background: white;
  padding: 14px 20px;
  position: absolute;
  right: -4px;
  top: -4px;
}

<div class="outer">
  <div class="corner">Corner Element
  </div>
</div>

Или отключите окраску в этом углу с градиентом:

.outer {
  border-radius: 20px;
  background: linear-gradient(-135deg,transparent 20px,red 0);
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 600px;
  z-index: 10;
  border: solid 1px white;
}
.corner {
  border-radius: 0 0 0 20px;
  background: white;
  padding: 14px 20px;
  position: absolute;
  right: -4px;
  top: -4px;
}

<div class="outer">
  <div class="corner">Corner Element
  </div>
</div>