How to make everything rounded corner with jQuery
Web elements with rounded corner is always a beauty of a cleaner and appealing web interface. If your template is rounded corner, people will like it more and it will be eye catching than regular squared designs. Rounded corners was never been so easy with CSS because if you are going to make rounded corners with CSS you need to either use multiple image sets. Or you have to use multiple divs, spans elements in order to make a round corner box.
jQuery is a javascript client library that not only helps in scripting but also making the web elements and your web page layout more eye catching.
jQuery Corners
jQuery corners is a plugin which is used to make any web element rounded corner. You don’t even need to use any type of CSS. Just make a background color and a border color/width of your element and let the jQuery corner do the rest of the work. You can make as many round corners as you want with a single line of code.
Just add a class to all of the elements you want to make rounded corners, for example
<div class="rounded">I am a round corner div</div> <div class="bevel">I am a bevel rounded corner box</div>
And include jQuery and jQuery corner plugin in your header file along with the following code
<script type="text/javascript">
$(document).ready(function(){
$("rounded").corner();
$("bevel").corner("bevel");
});
</script>
The first is simply round corner while bevel have squared round corners. We just need to call the round corner function when document is ready and loaded with all DOM elements.
More demos and download of this plugin can be found here.
Related posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Well thats a jQuery plugin which can make anything rounded corner. If you mean my site (rounded corners in design of thinkflick) then it is image based. It could be done with jQuery too.
For the images, it is better to you a little bit larger in code but much effect plugin called Curvy Corners.. here is the link
http://blue-anvil.com/download/jquery.curvycorners.zip
and here is the demo for using it on image
except closing queries...
Did you get this to work on your site? I tried following the instructions but I can’t get it to work. I see you used CSS for your corners, so I was just wondering.