jQuery Corners 0.3

+ 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>
+ + +
+ 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>
+ + +
+ 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>
+ + +

+ 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;
+ } + +

+ + jQuery Corners contains its own algorithm to create anti-aliased corners. + Native browser support has been disabled here. + +
+ 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. + +
+ 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. +