<div class="wrapper">
    <article class="flow">
      <h1>Border color</h1>
      <figure class="callout">
          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.
      <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 class="my-element"></div>
.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;' : '');

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.