Bordas arredondadas com jQuery
Posted by Gabriel Verta | Posted in JavaScript, jQuery | Posted on 30-10-2009-05-2008
0
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/.
O post original esta no blog da Stiod
É isso ai 