<html>
<body>
  <style>
      #t {
          width: 400px;
          height: 400px;
          border: dashed rgba(255,0,0,1);
          border-width: 12px 4px 12px 4px;
          border-radius: 40px;
          border-left-color: rgba(0,0,255,1);
          border-bottom-color: rgba(0,128,0,0.5);
          border-right-color: rgba(0,128,0,0.5);
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          margin: 20px;
      }
      div {
        margin: 10px 0;
      }
  </style>
  <div id="t"></div>


  <script>
      function update()
      {
          t.style.borderWidth = widthSlider.value + 'px ' + widthScale.value * widthSlider.value + 'px'
          t.style.webkitBorderRadius = radiusScale.value * radiusSlider.value + 'px ' + radiusSlider.value + 'px'
      }
  </script>
</body>
</html>