<div id="selector">
  <label>
    <input type="radio" name="border" checked/>
    <span data-border=""> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="left"> </span>
  </label>
    <label>
    <input type="radio" name="border"/>
    <span data-border="right"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="bottom"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top left"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top right"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top bottom"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="left right"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="left bottom"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="right bottom"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top left right"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top left bottom"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top right bottom"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="left right bottom"> </span>
  </label>
  <label>
    <input type="radio" name="border"/>
    <span data-border="top left right bottom"> </span>
  </label>
</div>
<div class="target" data-border=""></div>

label {
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  cursor: pointer;
}

span[data-border] {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px dotted grey;
}

span[data-border*="top"],
div[data-border*="top"] {
  border-top: 2px solid black;
}

span[data-border*="left"],
div[data-border*="left"] {
  border-left: 2px solid black;
}

span[data-border*="bottom"],
div[data-border*="bottom"] {
  border-bottom: 2px solid black;
}

span[data-border*="right"],
div[data-border*="right"] {
  border-right: 2px solid black;
}

div.target {
  width: 100px;
  height: 100px;
  background: #eee;
}

const targetDiv = document.querySelector('div.target');
document.querySelector('#selector').addEventListener(
  'change',
  (e) => {
    targetDiv.dataset.border = e.target.parentElement.querySelector('[data-border]').dataset.border;
  }
);