jQuery Corners 0.3

This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.

Architectural features:
  • Less than 8000 bytes after yui compression.
  • Beautiful and fast anti-aliasing for older or stubborn browsers.
  • Degrades well for browsers with javascript turned off.
  • Native browser corners used on Safari, iPhone, and Firefox 3.
  • Form and anchor buttons are easily styled and rounded.
  • Documentation and test coverage (this file).

Works with:

  • iPhone
  • Chrome
  • Firefox
  • Safari 2+
  • Opera 9.0+
  • Internet Explorer 6+
  • and probably more...
Introduction Options Buttons Swatches Miscellaneous
Once jQuery and jQuery.corners scripts are loaded, rounding corners is easy. <div style="background-color:#acc; padding:5px" 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 10px");
});</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";

5px
Sets the corner radius. Default is 5.
10px 6px
Sets the x and y radii to different values.
anti-alias
Corners are anti-aliased. Default.
transparent
For background images or hover states, use this transparent style.
no-native
Disables all of the following border-radius extensions. Mostly used for testing.
webkit
Enables use of -webkit-border-radius on compatible browsers such as Safari and iPhone. Currently disabled for Google Chrome. Default.
no-webkit
Will not use -webkit-border-radius on any browser.
mozilla
Enables use of -moz-border-radius on Firefox 3+ and other Mozilla based browsers. Default.
no-mozilla
Will not use -moz-border-radius on any browser.
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!')" class="rounded {transparent} button">
  Press
</a> for a greeting. Press for a greeting.

Form buttons too. Input elements are transmogrified to an anchor. Browsers without javascript render buttons like the square examples here. <form action="?">
<input type="submit" value="Submit" class="button">&nbsp;
<input type="submit" value="Submit" class="rounded {transparent} button">&nbsp;
<input type="button" value="Javascript" class="button" onclick="alert('OK!'); return false;">&nbsp;
<input type="button" value="Javascript" class="rounded {transparent} button" onclick="alert('OK!'); return false;">
</form>
     

Anchors and buttons require CSS like so. a.rounded, .button {
  outline: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle; /* or top */
  display: -moz-inline-box;
  display: inline-block;
  overflow: visible; /* IE6 form button fix */
}
.button {
  color: #000;
  background-color: #acc;
  padding: 5px 7px;
}
.button:hover {
  background-color: #cee;
}
Your browser has a supported border-radius extension. You deserve a cookie.
8 7 6 5 4 3 2 1

jQuery Corners contains its own algorithm to create anti-aliased corners. Native browser support has been disabled here.
8 7 6 5 4 3 2 1

If you plan on using a background image or hover state, this transparent style will do the trick. Your browser has border-radius support and will normally display these like the first example.
8 7 6 5 4 3 2 1

Width, height, margin and padding attributes supported.

No-native floating right test.

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

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 the console. Note that if your browser supports border-radius extensions then you will need to apply "no-native" to the elements you want checked.

Elements can only be rounded once. This allows for easier ajax support since you can use the same callback for $(document).ready and ajaxComplete.

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.