Prototype Corner Demo - ported from jQuery

Available Corner Effects

Round

new Effect.Corner(el.parentNode);

Bevel

new Effect.Corner(el, "bevel");

Notch

new Effect.Corner(el, "notch");

Bite

new Effect.Corner(el, "bite");

Cool

new Effect.Corner(el, "cool");

Sharp

new Effect.Corner(el, "sharp");

Slide

new Effect.Corner(el, "slide");

Jut

new Effect.Corner(el, "jut");

Curl

new Effect.Corner(el, "curl");

Tear

new Effect.Corner(el, "tear");

Fray

new Effect.Corner(el, "fray");

Wicked

new Effect.Corner(el, "wicked");

Sculpt

new Effect.Corner(el, "sculpt");

Long

new Effect.Corner(el, "long");

Dog Ear

new Effect.Corner(el, "dog");

Dog2

new Effect.Corner(el, "dog2");

Dog3

new Effect.Corner(el, "dog3");

Choose Your Corner

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

Top Bevel

new Effect.Corner(el, "bevel top");

Top-Left Bite

new Effect.Corner(el, "bite tl");

Round Bottom

new Effect.Corner(el, "bottom");

Bottom-Left Notch

new Effect.Corner(el, "notch bl");

Top-Right Dog Ear

new Effect.Corner(el, "dog tr");

Top-Left, Bottom-Right Cool

new Effect.Corner(el, "cool tl br");

Specify Size

Include a px value to specify the corner size

Round 30px

new Effect.Corner(el, "30px");

Round 5px

new Effect.Corner(el, "5px");

Cool 20px

new Effect.Corner(el, "cool 20px");

Sharp 20px

new Effect.Corner(el, "sharp 20px");

Bite 30px

new Effect.Corner(el, "bite 30px");

Wicked 20px

new Effect.Corner(el, "wicked 20px");

Dog 20px

new Effect.Corner(el, "dog 20px");

Dog2 30px

new Effect.Corner(el, "dog2 30px");

Dog3 30px

new Effect.Corner(el, "dog3 30px");

Fun Stuff

Interesting Side Effects

Left Half of Arrow

new Effect.Corner(el, "sharp tr br 20px");

Right Half of Arrow

new Effect.Corner(el, "sharp tl bl 20px");