CODEWITHSUNDEEP
jquerycssajaxjquery-plugins
Rajasekar
Rajasekar

Reputation: 18948

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

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?

Upvotes: 0

Views: 8340

Answers (3)

James Lawruk
James Lawruk

Reputation: 31345

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.

Upvotes: 5

Derek Swingley
Derek Swingley

Reputation: 8752

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.

Upvotes: 3

Randell
Randell

Reputation: 6170

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.

Upvotes: 8

Related Questions