JQuery Corner Gallery

(Version 1.01, updated 10/24/2006)

Corner adorners are all the rage in web design these days. Designers say that plain old right-angle corners are so Web 1.0 now. However, some of the techniques to take the edge off corners use extra markup that is only there to support the decoration, which violates the separation of content and presentation. Now that's really Web 1.0 so we don't want to go there. Others use single-purpose rounded corner images or bulky Javascript code; that seems like a high price to pay for beauty.

I'm a big fan of JQuery, a lightweight framework that easily handles tedious DOM scripting chores. It made sense to take advantage of JQuery's functionality when building a corner adorner, and so the $(…).corner() jQuery plugin was born.

Rounded corners are old news, so I figured I should try to innovate a bit. The first version of this plugin supported the ability to have shapes other than rounding on the corners. I showed a proof-of-concept using a boring beveled border, and toyed with several other designs, but got distracted by other shiny things and never got around to releasing it. Then, Mike Alsup sent me his update to the plugin that included lots of amazing corner options.

Here are some highlights of the plugin's capabilities:

• Myriad corner effects are available; the demo page for a complete list and more ideas.
• The width and height of the adornment area can be changed to vary the effect.
• You can apply different effects to top and bottom corners, or apply an effect to specific corners.
• Boxes to be adorned are selected using the standard JQuery $() element selector function.
• No special markup is required; display falls back to unadorned corners when Javascript is off.
• You can define your own custom corner effects that the plugin will use.

How to harness this creation

First, get a copy of JQuery (a relatively fresh copy is kept here) and then a copy of jquery.corner.js. View the demo page and its source, and it should all fall into place. The corner function takes one string argument: $().corner("effect corners width") The effect is the name of the effect to apply, such as round or bevel. If you don't specify an effect, rounding is used. The corners can be one or more of top, bottom, tr, tl, br, or bl. By default, all four corners are adorned. The width specifies the width of the effect; in the case of rounded corners this will be the radius of the width. Specify this value using the px suffix such as 10px, and yes it must be pixels.

If you're new to jQuery, the $(…) stuff may be puzzling. It's actually pretty easy. Use a string just like a CSS selector to select the elements you want to use. So, to round all divs with the class of "rounded", you'd use $("div.rounded").corner(). To use a 4 pixel bevel on the element with the id of "slant" you'd use $("#slant").corner("bevel 4px").

Tips and Tricks

As you apply these corner styles to your own pages, here are some tips (pitfalls?) to keep in mind:

• Use pixel units for borders and padding in your styles. The code needs to position elements at the top and bottom of the adorned element, and to do this it wants to see pixel measurements. Measurements other than padding and borders can be in any units you want.
• Remember, it's inserting new elements. If you have css rules or jQuery selectors that depend on, for example, finding the first element in a div that you are rounding, they could be affected by the newly inserted elements. Use a DOM inspector if you think this is happening and adjust your selectors accordingly.
• Define an explicit background color in a parent element. Safari requires that an ancestor of the element being adorned has a background color set. Just set the body to "background: #fff" if you don't need some other color.
• Don't use a background image in the parent. The adorned element effect sets pixels on the corners to the same color as the parent element. Those pixels are not transparent and will not show any background image that is used in the parent element.
• Make the corner height smaller than the top/bottom padding. If the height of the corner effect is larger than the padding, the div's height will increase. You can either accept that or adjust the height/padding appropriately.
• Minimize height and number of adorned divs for best performance. Each pixel of additional height requires an element to be dynamically created and inserted into the document, plus two more to wrap the top and bottom groups. So, an effect that is 8 pixels high on both the top and the bottom inserts 18 elements into the document for each element on the page that is adorned.
• The "sharp" corner style is very sharp! Come to think of it, so are the "sculpt" and "cool" styles. Like all sharp pointy things, keep them out of reach of children. If you use are viewing a web page on a mobile device that uses those styles, do not run. You may fall and put your eye out. I will not be responsible for injuries due to the sharpness of your corners.