Demo: CSS mask-border-outset

<div class='masked-box'>Masked Box</div>

.masked-box {
  width: 300px;
  height: 200px;
  background-color: lightblue;
  border: 10px solid transparent;
  mask-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="100%" height="100%" fill="white"/><circle cx="150" cy="100" r="80" fill="black"/></svg>');
  mask-border-outset: 20px;
  mask-border-repeat: stretch;
  mask-border-slice: 10;
  mask-border-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="100%" height="100%" fill="none" stroke="black" stroke-width="10"/></svg>');
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: darkblue;
  text-align: center;
}

// No JavaScript required for this demo