Demo: CSS mask-border-slice

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

.masked-border { 
  width: 200px; 
  height: 100px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 24px; 
  color: white; 
  background-color: #3498db; 
  mask-border-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><rect width="200" height="100" fill="white"/><circle cx="100" cy="50" r="40" fill="black"/></svg>'); 
  mask-border-slice: 20; 
  mask-border-width: 20px; 
  mask-border-outset: 0; 
  mask-type: alpha; 
  -webkit-mask-border-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><rect width="200" height="100" fill="white"/><circle cx="100" cy="50" r="40" fill="black"/></svg>'); 
  -webkit-mask-border-slice: 20; 
  -webkit-mask-border-width: 20px; 
  -webkit-mask-border-outset: 0; 
  -webkit-mask-type: alpha; 
}

// No JavaScript required for this demo