JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border"></div>
<select>
  <option style="display:none;">Выберите цвет бордюра</option>
  <option value="gray">Серый</option>
  <option value="blue">Синий</option>
  <option value="green">Зелёный</option>
  <option value="yellow">Жёлтый</option>
  <option value="black">Чёрный</option>
</select>

CSS

.border {display: block; width: 100px; height: 50px; background: red;}
.border::before {content: ''; display: block; width: 100px; height: 50px; border: 5px dotted transparent; position: absolute; box-sizing: border-box;}
.border.gray::before {border-color: gray;}
.border.blue::before {border-color: blue;}
.border.green::before {border-color: green;}
.border.yellow::before {border-color: yellow;}
.border.black::before {border-color: black;}

JavaScript

$('select').bind('change',function(){
	var borderColor = $(this).val();
  $('.border').removeClass().addClass('border '+borderColor);
});