<div class="my-element"></div>
<div>
  <label>
    Select repeat value
    <select id="repeat">
      <option value="stretch">default (stretch)</option>
      <option value="repeat">repeat</option>
      <option value="round">round</option>
      <option value="space">space</option>
    </select>
  </label>
</div>
.my-element {
  height: 250px;
  width: 230px;
  border: 1px solid;
  border-image: url(https://assets.codepen.io/174183/border-image-source.png);
  border-image-slice: 22 22 22 22;
  border-image-width: 20px 20px 20px 20px;
  border-image-repeat: stretch;
}

const options = document.querySelector("select");
const element = document.querySelector(".my-element");

options.addEventListener("change", () => {
  element.style.borderImageRepeat = options.value;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.