Установите радиус границы (каждый угол) с помощью Javascript

Question

У меня есть div с CSS-стилем, подобным этому:

div#xy {
  height:180px; 
  width:180px;
  border: 6px solid black;
  border-radius: 0px 0px 0px 0px;
}

Чтобы изменить border-radius из каждого угла , я написал эту форму с четырьмя числовыми вводами:

<form>
:<input type="number" name="ctl" min="0" max="180"step="5" value="0" onChange="cornerTl()" onClick="cornerTl()" />
:<input type="number" name="ctr" min="0" max="180"step="5" value="0" onChange="cornerTr()" onClick="cornerTr()" />
:<input type="number" name="cbr" min="0" max="180"step="5" value="0" onChange="cornerBr()" onClick="cornerBr()" />
:<input type="number" name="cbl" min="0" max="180"step="5" value="0" onChange="cornerBl()" onClick="cornerBl()" />
</form>

И эта функция:

function cornerTl(){
 var topLeft = document.forms[0].elements[0].value
 var topRight = document.forms[0].elements[1].value
 var botLeft = document.forms[0].elements[2].value
 var botRight = document.forms[0].elements[3].value
 document.getElementById("xy").style.WebkitBorderRadius = topLeft + "px " + topRight + "px " botLeft + "px " + botRight + "px"; 
}

Сценарий не работает, но я могу изменить все четыре угла одновременно только с одним значением:

document.getElementById("xy").style.WebkitBorderRadius = topLeft + "px "

Как я вижу, моя первая функция должна работать - почему бы и нет?

Answer 1

В последней строке функции отсутствует + (до botLeft)
Консоль должна была сказать тебе.