Ankhena

const div = document.getElementById('div'); //Сам блок
const select = document.getElementById("border_style");

select.addEventListener('change', () => {
  div.style.setProperty('--border-style', select.value)
})

<select id="border_style">
  <option value="dotted">Dotted</option>
  <option value="dashed">Dashed</option>
  <option value="solid">Solid</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>
</select>

<div id="div"></div>

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}


#div {
  --border-color: red;
  --border-style: dotted;
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  border: 3px var(--border-style) var(--border-color);
  background: antiquewhite;
}