Demo: CSS mask-border-width

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

.masked-box { 
  width: 300px; 
  height: 200px; 
  background-color: lightblue; 
  mask-border-source: linear-gradient(to right, transparent, black); 
  mask-border-width: 20px; 
  mask-border-mode: alpha; 
  mask-border-outset: 5px; 
  mask-border-repeat: stretch; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 24px; 
  color: white; 
  border-radius: 15px; 
  mask-type: alpha; 
}

// No JavaScript required for this demo