JQuery - Rounded corners

My intentions for my site are to add curvy corners.. Does anyone know if there is a way to make curvy corners round the corners of every element on 开发者_StackOverflow社区the page... if that is the case how do you do it?

You dont need JavaScript for this, you can do it with CSS - although IE6 wont support this. For all browsers you will need to use images.

Try this:

.round{
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}

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

As @JLeagle pointed out already, you can use CSS to achieve this in most browsers.

If you do need support for older browsers there's a nifty jQuery Curvy Corners plugin you can use:

http://plugins.jquery.com/project/curvy-corners

Easiest option: CSS3 Solution If you want to support older browsers (e.g. IE6), you'll have to use images. Not sure how/why would you do this with jQuery though.

There is no general solution to this, for lots of reasons, because you will have elements of different sizes, and you will want their corner radii to be appropriate to their size, but mainly because you have cross-browser issues to deal with.

So my oppinion is that there is no single answer to your question, and it's too vague to be answered here.

<div id="#my-element">Content</div>

CSS:

#my-element{
  -moz-border-radius: 15px;
  -webkit-border-radius:15px;
  border-radius: 15px; /*Future proofing*/
}

OR:

jQuery:

$('#my-element').css({
 -moz-border-radius: 15px, 
 -webkit-border-radius:15px,
  border-radius: 15px
});