Bordas arredondadas com jQuery
Postado por Gabriel Verta em 22/10/2009
Pulando um pouco a seqüência de posts anteriores, gostaria de mostrar-lhes o plugin Jquery Corner que cria bordas arredondas com o JQuery.
E como funciona?
Para adicionar bordas arredondas basta você adicionar a biblioteca do jquery na sua página e o arquivo js do plugin:
<html>
<head>
<title>JQuery Corner</title>
// Jquery
<script src="jquery.js" type="text/javascript"></script>
// JQuery Corner
<script src="jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Arredonda a borda do elemento com id borda-arredondada
$('#borda-arredondada').corner()
})
</script>
</head>
<body>
<div id="borda-arredondada">
Lorem ipsum dolor sit amet
</div>
</body>
</html>
Segue o exemplo:
Você ainda pode passar parâmetros para colocar bordas com certo tamanho de arredondamento, ou somente no topo, em baixo, ou outras "formas de arredondamento":
// Borda de 30px em todas as pontas
$("#borda-arredondada').corner('30px')
// Somente no topo
$("#borda-arredondada').corner('top')
// Somente em baixo
$("#borda-arredondada').corner('bottom')
// Somente no topo direito (tr = top + right)
$("#borda-arredondada').corner('tr')
// Bevel
$("#borda-arredondada').corner('bevel')
Outros exemplos podem ser vistos no site http://www.malsup.com/jquery/corner/.
É isso ai 
1 Comentário para “Bordas arredondadas com jQuery”
Deixe um comentário |
hum parece bom! nao funciona em quais navegadores? vlw