Advanced Search

JQuery: Rounded Corners

/ Published in: JavaScript
Save to your folder(s)
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/).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.