CSS mask-border-slice Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.demo {
  padding: 20px;
}

.card {
  width: 340px;
  padding: 24px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: #0b1220;
  box-shadow: 0 8px 24px rgba(11,18,32,0.12);
  border-radius: 12px; /* fallback */

  /* Mask border source (SVG data URI) */
  -webkit-mask-border-source: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22black%22%20rx%3D%2212%22%20ry%3D%2212%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22white%22%20fill-opacity%3D%220%22%20rx%3D%228%22%20ry%3D%228%22%2F%3E%3C%2Fsvg%3E');
  mask-border-source: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22black%22%20rx%3D%2212%22%20ry%3D%2212%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22white%22%20fill-opacity%3D%220%22%20rx%3D%228%22%20ry%3D%228%22%2F%3E%3C%2Fsvg%3E');

  /* Slice controls how the SVG is divided into a 9-patch (corners/edges/center) */
  -webkit-mask-border-slice: 30 fill;
  mask-border-slice: 30 fill;

  -webkit-mask-border-repeat: round;
  mask-border-repeat: round;

  -webkit-mask-border-width: 16px;
  mask-border-width: 16px;

  padding: 32px;
}

.card h1 {
  margin: 0 0 8px 0;
  font-size: 20px;
}

.card p {
  margin: 0 0 16px 0;
  color: #334;
  font-size: 14px;
  line-height: 1.4;
}

.card button {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
</style></head><body><div class='demo'>
  <div class='card'>
    <h1>Masked Border Card</h1>
    <p>This card uses an SVG border mask and mask-border-slice to keep a transparent center.</p>
    <button>Learn more</button>
  </div>
</div></body></html>