Quem nunca quis colocar um elemento com cantos arredondados em um site?
Existem dezenas de formas de fazer isso, a maioria delas implica no uso de imagens (o que não é errado), mas muitas vezes queremos algo mais rápido, mais dinâmico e se possível, mais leve… E é aí que entra o nosso grande – e poderoso – amigo jQuery! 
Veja aqui um exemplo de uso do jQuery Corner.
Existe um plugin do jQuery chamado jQuery Corner que faz o trabalho de arredondar os cantos de um elemento pra você… Se o seu navegador suporta regras de CSS pra isso, ele vai usá-las, se o navegador não suportar (IE6 por exemplo) ele dá o jeito dele e você obtem o mesmo resultado sem precisar criar nenhuma imagem ou hack de CSS.
Exemplo de uso
Veja um exemplo do HTML completo da página de exemplo, aqui:
<html>
<head>
<title>Exemplo - jQuery Corner</title>
<!-- jQuery e jQuery Corner -->
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$('.canto1').corner("rounded 10px");
$('.canto2').corner('bevel 10px');
$('.canto3').corner('notch 5px');
$('.canto4').corner('bite 10px');
});
</script>
<!-- CSS -->
<style type="text/css">
div.canto1 { background: red; height: 100px; width: 400px; float: left; margin: 10px }
div.canto2 { background: blue; height: 200px; width: 300px; float: left; margin: 10px }
div.canto3 { background: green; height: 300px; width: 200px; float: left; margin: 10px }
div.canto4 { background: purple; height: 400px; width: 200px; float: left; margin: 10px }
</style>
</head>
<body>
<div class="canto1">
<p>Conteúdo</p>
<p>Conteúdo novo</p>
</div>
<div class="canto2">
<p>Conteúdo</p>
<p>Conteúdo novo</p>
</div>
<div class="canto3">
<p>Conteúdo!</p>
</div>
<div class="canto4">
<p>Conteúdo</p>
<p>Conteúdo novo</p>
</div>
</body>
</html>
A mágica toda acontece ali, entre a linha 11 e 14.
Espero que tenham gostado! 
Você também vai gostar de ler:
- PNG’s transparentes no Internet Explorer com jQuery (IE PNGFix)
- Validação de formulários com jQuery
- Galeria de fotos (slideshow) com jQuery
- Criando um menu retrátil com CSS e jQuery
- O que é e como funciona o jQuery
Com as tags Arredondado, Canto, CSS, Dinâmico, HTML, JavaScript, jQuery, JS, Navegador, Rounded Corner, Scripts
Escrito por Thiago Belem
Gostou desse artigo?
Não se esqueça de assinar o RSS e divulgue-o para o mundo:
