HTML
CSS
JavaScript
<div class='masked-box'>Hello, World!</div>
.masked-box { width: 300px; height: 150px; background-color: lightblue; mask-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="black"/><circle cx="5" cy="5" r="5" fill="white"/></svg>') 10 fill; mask-border-repeat: round; mask-border-slice: 10; mask-type: alpha; }
// No JavaScript required for this demo
Hello, World!