<div class="sandbox">
  <div class="options">
    <pre>
.element {
  border-radius:&nbsp;<select class="top-left">
        <option value="0">0</option>
        <option value="15px" selected>15px</option>
        <option value="30px">30px</option>
        <option value="25%">30%</option>
        <option value="50%">50%</option>
      </select> <select class="top-right">
        <option value="0">0</option>
        <option value="15px" selected>15px</option>
        <option value="30px">30px</option>
        <option value="25%">30%</option>
        <option value="50%">50%</option>
      </select> <select class="bottom-right">
        <option value="0">0</option>
        <option value="15px" selected>15px</option>
        <option value="30px">30px</option>
        <option value="25%">30%</option>
        <option value="50%">50%</option>
      </select> <select class="bottom-left">
        <option value="0">0</option>
        <option value="15px" selected>15px</option>
        <option value="30px">30px</option>
        <option value="25%">30%</option>
        <option value="50%">50%</option>
      </select>
}
</pre>
  </div>

  <div class="content">
    <div class="element"></div>
  </div>

</div>

.element {
  background-color: var(--blue);
  width: 100px;
  height: 100px;
  border-radius: 15px;
  border: solid 10px var(--blue);
  padding: 0;
  margin-left: auto;
}

@media (max-width: 660px) {
  .element {
    width: calc(100% - 70px);
    height: 45px;
    margin: 0 auto;
  }
}
View Compiled 
const selectList = document.querySelectorAll('select');
const topLeft = document.querySelector('.top-left');
const topRight = document.querySelector('.top-right');
const bottomRight = document.querySelector('.bottom-right');
const bottomLeft = document.querySelector('.bottom-left');
const element = document.querySelector('.element');

selectList.forEach(select => select.addEventListener('change', e => {
  element.style.borderRadius = `
    ${topLeft.value} 
    ${topRight.value} 
    ${bottomRight.value} 
    ${bottomLeft.value}`;
}));
View Compiled

External CSS

  1. https://tim-montmorency.com/timdoc/shared/styles/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.