<div class="demo">
  <div class="element">
    <p>Masking allows you to display selected parts of an element while hiding the rest.</p>
    <p>The mask-border property is used to apply a border mask image to an element.</p>
  </div>
  
  <select name="" id="select">
    <option value="stretch" selected>stretch</option>
    <option value="repeat">repeat</option>
    <option value="round">round</option>
    <option value="space">space</option>
  </select>  

  <div class="input-wrapper">
    <input type="checkbox" id="switch" />
    <label for="switch" class="label">Fill</label>
  </div>      

  <div class="input-wrapper">
    <label for="slice">Slice:</label>
    <input id="slice" type="range" min="0" max="300" step="1" value="100" />
    <span class="slice-value">100</span>
  </div>
  
  <div class="input-wrapper">
    <label for="width">Width:</label>
    <input id="width" type="range" min="0" max="300" step="1" value="100" />
    <span class="width-value">100px</span>
  </div>  
  
  <div class="input-wrapper">
    <label for="outset">Outset:</label>
    <input id="outset" type="range" min="0" max="300" step="1" value="0" />
    <span class="outset-value">0</span>
  </div>    

</div>

* {
  box-sizing: border-box;
}

html {
  --color: #ffc000;
  --bg: #1b1b1b;
  accent-color: var(--color);        
}

body {
  color: #eee;
  font-size: 1.1em;        
  font-family: system-ui;
  padding: 2rem;
  background-color: var(--bg);
}

input {
  outline: none;
}

select:focus-visible,
input:focus-visible {
  outline: 1px dashed var(--color);
  outline-offset: 3px;
}

.demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.element {
  width: 300px;
  height: 300px;
  background-color: var(--color);
  padding: 20px;
  color: #333;
  font-weight: 600;
  -webkit-mask-box-image-source: url(https://i.imgur.com/ZJs84HP.png);
  -webkit-mask-box-image-slice: 100;
  -webkit-mask-box-image-width: 100px;  
  -webkit-mask-box-image-repeat: round;
}          

input[type="range"] {
  width: 300px;
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  user-select: none;
}

.label {
  cursor: pointer;
  font-weight: bold;
}  

select {
  padding: .5rem 1rem;
}


@supports not (mask-border: none) {

  body::before {    
    box-sizing: border-box;
    content: "⚠️ Your browser doesn't support mask-border";
    display: block;
    max-width: 72rem;
    color: #f44336;
    font-weight: bold;
    padding: 2rem;
    margin: 0 auto 2rem;
    text-align: center;
  }
}

var element = document.querySelector('.element'),          
    slice = document.querySelector('#slice'),
    width = document.querySelector('#width'),
  outset = document.querySelector('#outset'),    
    select = document.querySelector('#select'),
    checkbox = document.querySelector('#switch');

element.style.webkitMaskBoxImageSlice = 100;
element.style.webkitMaskBoxImageWidth = '100px';

slice.addEventListener('input', function () {
  if(checkbox.checked) {        
    element.style.webkitMaskBoxImageSlice = this.value + ' fill';
    document.querySelector('.slice-value').textContent = this.value + ' fill';
  }
  
  else {
    element.style.webkitMaskBoxImageSlice = this.value;
    document.querySelector('.slice-value').textContent = this.value;
  }
}, false);

width.addEventListener('input', function () {
  element.style.webkitMaskBoxImageWidth = this.value+'px';
  document.querySelector('.width-value').textContent = this.value+'px';
}, false);

outset.addEventListener('input', function () {
  element.style.webkitMaskBoxImageOutset = this.value+'px';
  document.querySelector('.outset-value').textContent = this.value+'px';
}, false);

checkbox.addEventListener('change', function () {
  if(checkbox.checked) {        
    document.querySelector('.slice-value').textContent = element.style.webkitMaskBoxImageSlice + ' fill';
    element.style.webkitMaskBoxImageSlice = element.style.webkitMaskBoxImageSlice + ' fill';
  }

  else {
    element.style.webkitMaskBoxImageSlice = element.style.webkitMaskBoxImageSlice.replace('fill', '');
    document.querySelector('.slice-value').textContent = element.style.webkitMaskBoxImageSlice.replace('fill', '');
  }
}, false);      


select.addEventListener("change", function (e) {
  element.style.webkitMaskBoxImageRepeat = e.target.value;
});