<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Border image repeat</h1>
      <figure class="callout">
        <p>
          Change the value for <code>border-image: repeat;</code> to see how it affects the overall border appearance.
        </p>
      </figure>
      <div>
        <label>
          Select repeat value
          <select id="repeat">
            <option value="stretch">default (stretch)</option>
            <option value="repeat">repeat</option>
            <option value="round">round</option>
          </select>
        </label>
      </div>
      <div class="my-element"></div>
    </article>
  </div>
</main>

.my-element {
  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;
}

/* Presentational styles */
.my-element {
  width: 100%;
  max-width: 400px;
  height: 250px;
}

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

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