<!DOCTYPE html>
<html>
<head>
<style>
.mask {
  -webkit-mask-box-image: url('resources/mask.png') 5 5 5 5;
  background-color: grey;
  width: 200px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  /*
   * Clip 5px on each side to keep only the area not
   * affected by the mask.
   */
  clip: rect(5px, 195px, 45px, 5px);
}
</style>
</head>
<body>
<p>This should be a grey rectangle.</p>

<div class="mask"></div>
</body>
</html>