Anexo te dejo un ejemplo simple pero funcional de lo que hace la pagina que das como muestra:

Ejemplo:
-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(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("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"));
      });
      
    })

<!-- language: lang-html -->

    <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">px<br>
    <input id="SD" placeholder="Superior derecha">px<br>
    <input id="II" placeholder="Inferior izquierda">px<br>
    <input id="ID" placeholder="Inferior derecha">px<br>
    <input id="AB" placeholder="Ancho del borde">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>

<!-- end snippet -->

Espero te sirva, Saludos!! ;))...