jQuery Corners 0.2
This jQuery plugin will create beautifully rounded corners. No images or obtrusive markup necessary. Support for padding ensures your layout degrades gracefully for users who have disabled javascript.

Works with:

  • iPhone
  • Safari 2+
  • Firefox 2+
  • Opera 9.0+
  • Internet Explorer 6+
Introduction Options Buttons Swatches Miscellaneous
Once jQuery and jQuery.corners scripts are loaded, rounding corners is easy. <div style="background-color:#acc; padding:4px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>
Simple Example

The rounding algorithm accepts options. <div style="background-color:#acc; padding:10px" class="rounded">
  Example with different x and y sizes.
</div>
<script>$(document).ready( function(){
  $('.rounded').corners("30px 20px");
});</script>
Example with different x and y sizes.

You may override the options in the element's class. <div style="background-color:#acc; padding:10px" class="rounded {10px}">
  class="rounded {10px}"
</div>
<script>$(document).ready( function(){
  $('.rounded').corners("4px");
});</script>
class="rounded {10px}"
Options are passed as a string. For example: "6px transparent top";

4px
Sets the corner radius. Default is 4.
10px 5px
Sets the x and y radii to different values.
webkit
Enables use of -webkit-border-radius on compatible browsers such as Safari and iPhone. Default.
nowebkit
Will not use -webkit-border-radius on any browser.
anti-alias
Corners are anti-aliased. Default.
transparent
For background images or hover states, use this transparent style with aliased edges.
top
right
bottom
left
top-left
top-right
bottom-left
bottom-right
Mix and match to round only specific corners.
Anchor <a> elements can be turned into rounded buttons. <a href="javascript://" onclick="alert('Hello, World!')" style="color:#000; background-color:#acc; padding:4px" class="rounded">
  Press
</a> for a greeting. Press for a greeting.

Making anchors work requires some CSS. a {
  outline: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  display: -moz-inline-box;
  display: inline-block;
}
Form buttons work too. Well, they should anyways, this feature still needs testing.
//TODO examples
Anti-aliased corners look the same in all browsers. Even with webkit browsers rendering them natively.
8 7 6 5 4 3 2 1

Transparent corners will render without anti-aliasing except in webkit browsers. Some radius settings will look better than others. Selecting colors with less contrast will make the rough edges less noticeable. The webkit extension has been disabled for this group of swatches.
8 7 6 5 4 3 2 1

Here's the real webkit transparent buttons. Note that they have the radius increased by one to better match the aliased corners.
8 7 6 5 4 3 2 1

Width, height, margin and padding attributes supported.
There needs to be enough padding to insert corners otherwise the layout will not look the same across browsers or with javascript disabled. If jQuery.corners doesn't find enough padding and you have Firebug or Firebug Lite running, an error will be logged to help you find any missed padding.

If you're having trouble on your own pages, make sure you're not in quirks mode.

Fun things to try with this page: View the source for more examples. View it with an iPhone. Turn off javascript and reload. Increase or decrease the font size with your browser.

Obtain support and the latest version at: http://plugins.jquery.com/project/corners