Rounded Corners


Beveled Corners


Notched Corners


Dog-ear Corners


Bite Corners


Sharp Corners


Sculpt Corners


Frayed Corners


For several more interesting styles, please see the demo page!

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:

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: