How can I use the jQuery Round Corner plugin to make round corners?

Question

I need a round corner on my website. I'm fairly inexperienced with jQuery and JavaScript in general; what's the proper way to load and call this plugin?

Answer 1

You need to use the jquery.corner.js and in your script, just add

$(document).ready(function(){
  $("#box1").corner();
});

And in your mark-up, you're supposed to have:

<div id="box1"></div>

You can check out the jQuery Rounded Corners Tutorial for more.

Answer 2

Check this demo page: jQuery Corner Demo

Answer 3

1. Add this code to your head section (assuming your jquery is local):

<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.corner.js" type="text/javascript"></script>

<script type="text/javascript">
      $(function(){
          $('div.round').each(function() {
              var q = $(this).corner("rounded 7px");
              eval(q);
          });
      });
</script>

2. Add the class="round" to a div wrapper

<div class="round"></div>

• Just add the class="round" to any div you want on your page.
• Change the 7px value to adjust the "roundness" of the corner. A higher number is more round.

Answer 4

I would say go with css3. For Firefox it's:

.roundedCorners { -moz-border-radius: 5px; }

For Safari/Chorme it's:

.roundedCorners { -webkit-border-radius: 5px; }

And I'd stop there. Since this is purely a presentation/appearance thing I wouldn't mess with the JavaScript solutions. If your users aren't using a browser that supports css3, they just won't get rounded corners.

Answer 5

This article/tutorial is very thorough: http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html