<div class="container">
  <div class="toggle-container">
    
      <code>
        <span class="opening-line">div {</span>
        <span class="property-line">border-color: <input type="color" id="border-color" value="#DE3163">;</span>
        
        
        
        
        <label>
          <span class="property-line">border-width: 

            <input type="range" id="border-width" name="border-width"
           min="0" max="50">
            <output id="border-width-value"></output>px;</span>
        </label>
        <label>
          <span class="property-line">border-style: 
            <select class="toggle" name="toggle">
              <option value="solid">solid</option>
              <option value="dotted">dotted</option>
              <option value="dashed">dashed</option>
              <option value="double">double</option>
              <option value="groove">groove</option>
              <option value="ridge">ridge</option>
              <option value="inset">inset</option>
              <option value="outset">outset</option>    
              <option value="hidden">hidden</option>
              <option value="none">none</option> 
            </select>;
          </span>
        </label>
        <span class="closing-line">}</span>
      </code>
  </div>

  <div class="result-container">
    <div class="target-element">
    </div>
  </div>
  
</div>
* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

:root {
  --raspberry: #DE3163;
  --toggle-colour: #d9d9d9;
  --teal: #9FE2BF;
  --lemon: #DFFF00;
  --sunshine: #FFBF00;
  --orange-juice: #FF7F50;
  --turquoise: #40E0D0;
  --dusty-blue: #6495ED;
  --dusty-lilac: #CCCCFF;
}

.target-element {
  border-width: 15px;
  border-style: solid;
  border-color: var(--raspberry);
  background: var(--teal);
  min-height: 200px;
}

select {
  font-size: 1em;
}

code span {
  display: block;
}

span.property-line {
  padding: .2em 0 .2em 2em;
}

span.opening-line,
span.closing-line{
  padding: .2em 0;
}

#border-width {
  width: 100px;
}

.container {
    display: grid;
    grid-gap: 0;
    height: 100vh;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}

  @media (max-width: 700px) {
    .container {
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr;
    }
  }

.toggle-container {
  background: var(--toggle-colour);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.result-container {
  padding: 40px;
}
.result-container span {
  background: var(--teal);
}

const selectElement = document.querySelector(".toggle");
const targetElement = document.querySelector(".target-element");

const borderWidthValue = document.querySelector("#border-width-value");
const borderWidthSlider = document.querySelector("#border-width");
borderWidthValue.textContent = borderWidthSlider.value;

const borderColorInput = document.querySelector("#border-color");

//border style select
selectElement.addEventListener("change", (event) => {
  targetElement.style.borderStyle =  event.target.value;
});

//border width slider
borderWidthSlider.addEventListener("input", (event) => {
  borderWidthValue.textContent = event.target.value;
  targetElement.style.borderWidth =  event.target.value + 'px';
});

//border color picker
borderColorInput.addEventListener("input", (event) => {
  targetElement.style.borderColor =  event.target.value;
});

External CSS

  1. https://codepen.io/tutsplus/pen/vYrpEwd.css

External JavaScript

This Pen doesn't use any external JavaScript resources.