For several more interesting styles, please see the demo page!
(Version 1.01, updated 10/24/2006)
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:
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
If you don't specify an effect, rounding is used. The corners can be one 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
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
As you apply these corner styles to your own pages, here are some tips (pitfalls?) to keep in mind: