Corners

Round

$(this).corner();

Bevel

$(this).corner("bevel");

Notch

$(this).corner("notch");

Bite

$(this).corner("bite");

Cool

$(this).corner("cool");

Sharp

$(this).corner("sharp");

Slide

$(this).corner("slide");

Jut

$(this).corner("jut");

Curl

$(this).corner("curl");

Tear

$(this).corner("tear");

Fray

$(this).corner("fray");

Wicked

$(this).corner("wicked");

Sculpt

$(this).corner("sculpt");

Long

$(this).corner("long");

Dog Ear

$(this).corner("dog");

Dog2

$(this).corner("dog2");

Dog3

$(this).corner("dog3");

Dogfold*

$(this).corner("dogfold");

Bevelfold*

$(this).corner("bevelfold");

Steep

$(this).corner("steep");

InvSteep

$(this).corner("invsteep");

* Fold lines are not supported in Internet Explorer for pages rendered in quirksmode.
* Fold lines are only supported on top corners in Internet Explorer, unless running in IE8 standards-mode.

Choose Your Corner

Use top, bottom, left, right, tl, tr, bl, br to identify which corner to style

Top Bevel

$(this).corner("bevel top");

Top-Left Bite

$(this).corner("bite tl");

Round Bottom

$(this).corner("bottom");

Left Notch

$(this).corner("notch left");

Top-Right Dog Ear

$(this).corner("dog tr");

Top-Left, Bottom-Right Cool

$(this).corner("cool tl br");

Right Bevelfold

$(this).corner("bevelfold right");

Specify Size

Include a px value to specify the corner size

Round 30px

$(this).corner("30px");

Round 5px

$(this).corner("5px");

Cool 20px

$(this).corner("cool 20px");

Sharp 20px

$(this).corner("sharp 20px");

Bite 30px

$(this).corner("bite 30px");

Wicked 20px

$(this).corner("wicked 20px");

Dog 20px

$(this).corner("dog 20px");

Dog2 30px

$(this).corner("dog2 30px");

Dog3 30px

$(this).corner("dog3 30px");

Mix and Match

Chain corner calls to achieve combined effects

Round and Bevel

$(this).corner( "bottom").corner("top bevel");

Round and Notch

$(this).corner( "br top").corner("notch bl 20px");

Crazy

$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");

Adornment

Effects Using Nested Cornered Elements (Thanks to Kevin Scholl for this idea)

Round

$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")

Round

$(this).corner("round 8px").parent().css('padding', '8px').corner("round 14px")

Round

$(this).corner("round 14px").parent().css('padding', '15px').corner("round 14px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '10px').corner("bevel 14px")

Bite

$(this).corner("bite 10px").parent().css('padding', '8px').corner("bite 10px")

Bite

$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")

Fray

$(this).corner("fray 10px").parent().css('padding', '10px').corner("fray 10px")

Tear

$(this).corner("tear 20px").parent().css('padding', '15px').corner("tear 20px")

Notch

$(this).corner("notch 4px").parent().css('padding', '4px').corner("notch 4px")

Notch

$(this).corner("notch 10px").parent().css('padding', '12px').corner("notch 10px")

Sharp

$(this).corner("sharp 10px").parent().css('padding', '8px').corner("sharp 10px")

Cool

$(this).corner("cool 20px").parent().css('padding', '10px').corner("cool 10px")

Bite/Round

$(this).corner("round 20px").parent().css('padding', '8px').corner("bite 10px")

Round/Bite

$(this).corner("bite 15px").parent().css('padding', '8px').corner("round 10px")

Fray/Tear

$(this).corner("tear 20px").parent().css('padding', '8px').corner("fray 10px")

Jut/Sculpt

$(this).corner("sculpt 20px").parent().css('padding', '8px').corner("jut 10px")

Bevel/Notch

$(this).corner("notch 20px").parent().css('padding', '8px').corner("bevel 15px")

Notch/Bite

$(this).corner("bite 15px").parent().css('padding', '10px').corner("notch 10px")

Bite/Notch

$(this).corner("notch 15px").parent().css('padding', '15px').corner("bite 20px")

Curl/Long

$(this).corner("long 15px").parent().css('padding', '15px').corner("curl 15px")

Pick Your Colors (or keep your borders)

By default, corners are created using transparency and the background color of the parent element. When this is not what you want you can specify the colors that should be used.
        corner color: cc:#xxx
        strip color:  sc:#xxx
        keep borders: keep
        

normal corners

$(this).corner();

colored corners

$(this).corner("cc:#009");

colored strips

$(this).corner("sc:#009");

"keep" border

$(this).corner("keep");

cc:#009 notch

$(this).corner("cc:#009 notch");

cc:#009 keep notch

$(this).corner("keep notch cc:#009");

cc:#009 keep bite

$(this).corner("bite keep 15px cc:#009");

cc:#009 cool keep

$(this).corner("cc:#009 cool keep 20px");

Fun Stuff

Interesting Side Effects

Left

$(this).corner("sharp tr br 20px");

Right

$(this).corner("sharp tl bl 20px");

Fixed or Fluid? No problem!

The following divs have a combination of fixed and fluid widths and heights

Height: Fluid
Width: Fluid
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit

Height: Fixed
Width: Fluid
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet elementum at bibendum at, eros cras at mi et tortor egestas vestibulum sed cras at mi vestibulum phasellus sed felis sit amet orci dapibus semper.

Height: Fluid
Width: Fixed
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit

Height: Fixed
Width: Fixed
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit

Plain Styling

The following divs test normal fluid content with only the styles shown

Round
This is a plain div with a 30px padding

Round
This is a plain div with a 0px padding

Round
This is a plain div with a 30px padding and 30px margin

Uncornering

The following shows dynamic cornering/uncornering

// script used
...
$('#dynamic').corner();
...
$('#dynamic').uncorner();

Uncornering Demo
This div has an id of #dynamic

Using Markup Metadata Instead of Options

The following shows how to embed the corner options in your markup instead of passing them into the corner function

// markup
<div class="myCorner" data-corner="left 20px">Metadata Example</div>

// script - no options passed to corner function
$('.myCorner').corner();

Metadata Example