Posted By

ramnath on 06/26/09


Tagged

jquery corners curvy


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

DrewDouglass
alejandrosuch
qubestream


jQuery curvy corners


 / Published in: jQuery
 

URL: http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style>
  7. body{background:#999 url(_images/bg.png);font:normal 14px Georgia;color:#ccc;}
  8. .myBox,.realBox {
  9. width:400px;
  10. height:200px;
  11. background:#333 url(_images/sample.png) 0 0 no-repeat;
  12. margin:10px auto;padding:20px;
  13. border:5px solid #bcd;opacity:0.9;
  14. }
  15. </style>
  16. <script src="_js/jquery-1.3.2.min.js" type="text/javascript"></script>
  17. <script src="_js/jquery.curvycorners.packed.js" type="text/javascript"></script>
  18. <script type="text/JavaScript">
  19. $(function(){
  20. settings = {
  21. tl:{radius:10},
  22. tr:{radius:10},
  23. bl:{radius:10},
  24. br:{radius:10},
  25. antiAlias:true,
  26. autoPad:true,
  27. validTags:["div"]
  28. }
  29. $('.myBox,.realBox').corner(settings);
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <div class="myBox">
  35. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa.
  36. </div>
  37.  
  38. <div class="realBox">
  39. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
  40. </div>
  41. </body>
  42. </html>

Report this snippet  

You need to login to post a comment.