Rounded corners demo:

This is the demo page for the rounded corners article:

Simple rounded 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");

Return to article

Choosing corners:

Use this selectors to easily chose which corners will have effects applied:

top, bottom, tl, tr, bl, br

Top Bevel

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

Top-Left Bite

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

Round Bottom

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

Bottom-Left Notch

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

Top-Right Dog Ear

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

Top-Left, Bottom-Right Cool

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

Return to article

Specifying size:

Include a px value to change 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");

Return to article

Special effects

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");

Return to article

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")

Return to article

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.

normal corners

$(this).corner();

colored corners

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

colored strips

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

"keep" border

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

cc:#006600 notch

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

cc:#006600 keep notch

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

cc:#006600 keep bite

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

cc:#006600 cool keep

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

Return to article

Interesting Side Effects

Combine multiple effects to achieve this weird effects:

Left

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

Right

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

Notes:

Remember that this works for fluid divs, absolutely positioned divs, and pretty much any div you can think of...

Return to article