Posted By

chrisaiv on 11/07/08


Tagged

javascript jquery


Versions (?)

Who likes this?

32 people have marked this snippet as a favorite

annalog
benrudolph
jamesming
davu
btully
jonathanbp
medaqueno
jimredbaron
loric
davelk
jlvallelonga
masondixon
debsterbug
silviud
omerta83
mikoli
bobbym245
seanpowell
khejduk
enwood
neilp123
aegony
cryptonexus
ZedVex
michellebracken
albertomori
gunnu
yoitsben
r34194r
rcraven
ringo380
crvst


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.