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

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.