Neste post mostrarei como criar DIVS com cantos arredondados usando JQUERY.
Primeiro vamos ter que importar as bibliotecas Jquery e Jquery.Corner:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://www.malsup.com/jquery/corner/jquery.corner.js?v2.11"></script>
A sintaxe é simples, vejam um exemplo completo:
<html>
<head>
<title>DIVS com cantos arredondados com JQUERY</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/corner/jquery.corner.js?v2.11"></script>
<style type="text/css">
div.demo{background-color:#4281FF;text-align:center;float:left;width:200px;height:100px;margin:02px;padding:05px;}
div.main{width:650px;height:320px;background-color:#999999;padding:05px;}
</style>
<script type="text/javascript">
$("#main").corner("sculpt");
$("#div1").corner();
$("#div2").corner("bevel");
$("#div3").corner("notch");
$("#div4").corner("bite");
$("#div5").corner("cool");
$("#div6").corner("sharp");
</script>
</head>
<body>
<div class="main" id="main">
<h2><b>Exemplos:</b></h2>
<div class="demo" id="div1">
<p style="font-weight:bolder">Round</p>
<p>$("#div1").corner();</p>
</div>
<div class="demo" id="div2">
<p style="font-weight:bolder">Bevel</p>
<p>$("#div2").corner("bevel");</p>
</div>
<div class="demo" id="div3">
<p style="font-weight:bolder">Notch</p>
<p>$("#div3").corner("notch");</p>
</div>
<div class="demo" id="div5">
<p style="font-weight:bolder">Bite</p>
<p>$("#div5").corner("bite");</p>
</div>
<div class="demo" id="div6">
<p style="font-weight:bolder">Cool</p>
<p>$("#div6").corner("cool");</p>
</div>
<div class="demo" id="div4">
<p style="font-weight:bolder">Sharp</p>
<p>$("#div4").corner("sharp");</p>
</div>
</div>
</body>
</html>
Uma simples linha de código basta para criar o efeito:
$("DIV").corner();
Lembrando ainda que você definir o tamanho do corner:
$("DIV").corner("bevel 10px");
Muito simples e útil, já que nem todos os browsers renderizam a regra CSS border-radius.
Mais exemplos no site: JQUERY.CORNER
