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;
}