code_junkie

jquery round corners

Nov 12th, 2011
69
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.35 KB | None | 0 0
  1. http://blue-anvil.com/jquerycurvycorners/test.html
  2.  
  3. http://code.google.com/p/jquerycurvycorners/downloads/list
  4.  
  5. <head>
  6. <script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"></script>
  7. <script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"></script>
  8.  
  9. <script type="text/javascript">
  10. $(function(){
  11.  
  12. $('.myClassName').corner({
  13. tl: { radius: 6 },
  14. tr: { radius: 6 },
  15. bl: { radius: 6 },
  16. br: { radius: 6 }
  17. });
  18.  
  19. }
  20. </script>
  21. </head>
  22.  
  23. http://img44.imageshack.us/img44/3638/corners.jpg
  24.  
  25. <html>
  26. <head>
  27. <script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"></script>
  28. <script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>
  29. <script type="text/javascript">
  30. $(function(){
  31.  
  32. $('.myClassName').corner({
  33. tl: { radius: 12 },
  34. tr: { radius: 12 },
  35. bl: { radius: 12 },
  36. br: { radius: 12 }
  37. });
  38.  
  39. });
  40. </script>
  41. <style>
  42. .myClassName
  43. {
  44. width:320px;
  45. height:64px;
  46. background-color:red;
  47. text-align:center;
  48. margin:auto;
  49. margin-top:30px;
  50. }
  51. </style>
  52. </head>
  53.  
  54. <body>
  55.  
  56. <div class="myClassName">content</div>
  57.  
  58. </body>
  59.  
  60. </html>
  61.  
  62. $(document).ready(function() {
  63. $("#idofdiv").corners();
  64. });
Add Comment
Please, Sign In to add comment