組邊框半徑（每一個角落）使用Javascript

Question

我有一個CSS樣式這樣一個div：

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

要更改邊界半徑的每一個角落，我寫的這種形式具有四個號碼輸入：

<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

有A +在功能上的最後一行丟失（前botLeft）
控制檯應該告訴你的。