Preview how CSS border-radius values affect an element

const container = document.querySelector('#container').style;
const left = document.querySelector('#left');
const tops = document.querySelector('#top');
const right = document.querySelector('#right');
const buttom = document.querySelector('#buttom');
window.addEventListener('click',(e)=>{
  container.borderLeft = `2px solid red`; 
  container.borderTopLeftRadius = Number(left.value)+'px'; 
})
window.addEventListener('click',(e)=>{
  container.borderRight = `2px solid #e91e63`; 
  container.borderTopRightRadius = Number(tops.value)+'px'; 
})
window.addEventListener('click',(e)=>{
  container.borderTop = `2px solid #673ab7`; 
  container.borderBottomLeftRadius = Number(right.value)+'px'; 
})
window.addEventListener('click',(e)=>{
  container.borderBottom = `2px solid #009688`;

  container.borderBottomRightRadius = Number(buttom.value)+'px'; 
})