JQuery: Rounded Corners


 / Published in: JavaScript
 

URL: http://www.malsup.com/jquery/corner/

You will need to download a few things to easily create rounded corners. They are jQuery (http://jquery.com/) and the jQuery rounded corners plug-in (http://www.malsup.com/jquery/corner/).

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <!-- JQUERY Framework -->
  5. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  6. <script type="text/javascript" src="js/jquery.curvycorners.packed.js"></script>
  7.  
  8. <script type="text/javascript">
  9. $(document).ready(function(){
  10. //Rounded Corners
  11. $("#feature1").corner();
  12. });
  13. </script>
  14. <style type="text/css" media="screen">
  15. #feature1{
  16. float: left;
  17. height: 6em;
  18. width: 14em;
  19. min-height: 12em;
  20. margin-right: 1.5em;
  21. margin-bottom: 2em;
  22. padding: 0 1em;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27.  
  28. <div id="feature1">
  29. <h4>Rounded!</h4>
  30. </div>
  31.  
  32. </body>
  33. </html>

Report this snippet  

You need to login to post a comment.