Anexo te dejo un ejemplo simple pero funcional de lo que hace la pagina que das como muestra:
Ejemplo:
$(document).ready(function() {
$input=$("input");
$div=$("#myDiv");
$msg=$("#myMsg");
$("input").on("change", function(){
$div.css("border-radius", "0"+
$input[0].value+"px 0"+
$input[1].value+"px 0"+
$input[2].value+"px 0"+
$input[3].value+"px");
$div.css("-moz-border-radius", "0"+
$input[0].value+"px 0"+
$input[1].value+"px 0"+
$input[2].value+"px 0"+
$input[3].value+"px");
$div.css("-webkit-border-radius", "0"+
$input[0].value+"px 0"+
$input[1].value+"px 0"+
$input[2].value+"px 0"+
$input[3].value+"px");
$div.css("border", "0"+
$input[4].value+"px solid #000000");
$msg.html(
"border-radius: "+$div.css("border-radius")+
"<br>-moz-border-radius: "+$div.css("-moz-border-radius")+
"<br>-webkit-border-radius: "+$div.css("-webkit-border-radius")+
"<br>border: "+$div.css("border"));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%;">
<tr><td>
<input id="SI" placeholder="Superior izquierda" size=3>px<br>
<input id="SD" placeholder="Superior derecha" size=3>px<br>
<input id="II" placeholder="Inferior izquierda" size=3>px<br>
<input id="ID" placeholder="Inferior derecha" size=3>px<br>
<input id="AB" placeholder="Ancho del borde" size=3>px<br>
</td><td>
<div id="myDiv" style="margin:auto;
width:100px; height:100px;
background-color:#e7a61a;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 0px solid #000000;">
</div>
</td></tr>
<tr><td colspan="2">
<div id="myMsg" style="border:1px solid"></div>
</td></tr>
</table>
Espero te sirva, Saludos!! ;))...