<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Border color</h1>
      <figure class="callout">
        <p>
          Until you explicitly set a border color, it will be the element’s computed
          <code>color</code> value. Use the toggle to set it to
          <code>goldenrod</code> instead.
        </p>
      </figure>
      <label class="toggle" for="toggle-element">
        <span class="toggle__label">Apply <code>border: solid goldenrod;</code></span>
        <input type="checkbox" role="switch" class="toggle__element" id="toggle-element" />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
      <div class="my-element"></div>
    </article>
  </div>
</main>

.my-element {
  color: blue;
  border: solid; /* Will be a blue border */
}

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

const toggle = document.querySelector('#toggle-element');
const element = document.querySelector('.my-element');

toggle.addEventListener('change', ({target}) => {
  element.setAttribute('style', target.checked ? 'border: solid goldenrod;' : '');
});