Demo: CSS mask-border-mode

<div class='masked-box'>Hello, World!</div>

.masked-box { 
  width: 300px; 
  height: 200px; 
  background-color: lightblue; 
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="300" height="200" fill="white"/><circle cx="150" cy="100" r="80" fill="black"/></svg>'); 
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="300" height="200" fill="white"/><circle cx="150" cy="100" r="80" fill="black"/></svg>'); 
  mask-border-mode: alpha; 
  mask-border: transparent; 
  border: 10px solid transparent; 
  border-radius: 20px; 
  padding: 20px; 
  text-align: center; 
  font-size: 24px; 
  color: darkblue; 
}

// No JavaScript required for this demo