Skip to main content
se eliminaron 375 caracteres en el cuerpo
Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24

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

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

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

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

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

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

se eliminaron 35 caracteres en el cuerpo
Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24

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

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

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!! ;))...

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

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

Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24

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!! ;))...