Set border-radius (every single corner) with Javascript

Question

I have a div with a CSS-style like this:

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

To change the border-radius of every single corner , I wrote this form with four number inputs:

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

And this function:

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

The script didn't work, but I can change all four corners at once with only one value:

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

The way I see it, my first function should work – why doesn't it?

Answer 1

There is a + missing in the last line of the function( before botLeft )
The console should have told you.