You should also check out my script Liquid Canvas which uses HTML canvas to render rounded corners with drop shadows.

Rounding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed.
RUZEE.ShadedBorder itself is the successor of RUZEE.Borders, which was the most feature-rich round corners library out there. But it wasn’t quite easy to use, was slow, had some browser compatibility problems, etc.
ShadedBorders removes most of these limitations and comes with the following features:

* JavaScript-only Photoshop(tm)-like rendering without external images
* Round corners
* Drop shadows
* Glow effects
* Gradient backgrounds
* Graceful degradation – will look ok if JavaScript is turned off
* Borders with different widths and semi-transparency
* Full support for liquid designs
* Anti-Aliasing
* On-hover support
* Disable some of the corners, e.g. bottom-left
* Change borders on-the-fly
* Real transparency – looks perfect on any background
* Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera (>=9.0)
* Non-obstrusive
* Leight-weight (8.8KB uncompressed)
* Fast (0.5s for the example on a 2.2GHz machine)
* No JavaScript library dependencies

How-to:

Some steps are required to make your page use ShadedBorder:

Include ShadedBorder to your HTML header section:

Next, define an element you want to round. It is important that it does not directly contain text nodes, i.e. text must always be wrapped inside an HTML element (the “p” in this example):

...


I want to be rounded!


....

Then, in the header section, create the border object. You can define the radius of the round corners, the radius of the drop shadow and the width of the border.

var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16,  border:2 });

Note that all parameters are optional, as long as you at least specify one of them. You may also define, which corners/edges should not be rounded. Have a look at the simple example source code for details.

The last thing to do is, to add some JavaScript code directly at the end of the HTML Body which will render the border around the element with the ID “round_me”:

The radiuses and widths you specified for the border in the header section are one way of customization. The other way is to change colors. You do this in your CSS file:

#round_me, #round_me .sb-inner { background:red; }
#round_me .sb-shadow { background:blue; }
#round_me .sb-border { background:green; }

This will give your border a red “inner-style”, a blue shadow and a green border – don’t ever use this color combination – it will look extremely ugly
The first line is important for graceful degradation (new from v0.4 on): the background for your .sb-inner class must also be set on the element itself – but only for .sb-inner, NOT for .sb-shadow or .sb-border!

Adding some hover effect also happens in your CSS file. The following code snippet will change the “inner-style” of your border to purple, once you hover with your mouse over the #round_me element (hey purple will make this beast look even uglier – yuk!).

#round_me:hover, #round_me:hover .sb-inner { background:purple; }

Of course, this will work with “.sb-border” and “.sb-shadow” as well.
Tips

You can use RUZEE.ShadedBorder with the JavaScript library of your choice to get support for CSS-Selectors (e.g. using Prototype, jQuery, etc.). Here’s an example using the $$ function of Prototype to round all child elements of the element with the ID “header” that have the class “tab”:

border.render($$('#header .tab'));

Limitations

* Safari 2 seems to get pretty slow when showing ShadedBorder. I’m looking for people with a Mac and some JavaScript knowledge to speed things up. If you feel like you can help, please contact me via my contact form. Thanks!
* Since a ShadedBorder adds DIV elements to the element you round, those elements cannot be UL, OL, TABLE, TR, etc.. Allowed are DIV, LI, TD, TH, i.e. those elements that are allowed to directly contain DIV elements.

Demo: http://www.ruzee.com/blog/shadedborder

Download: http://www.ruzee.com/files/shadedborder-0.6.1.zip

Source: http://www.ruzee.com/blog/shadedborder

Related Listings:

1. Anti Aliaised Curvy Round Corners Script The “Curvy corners” script was orgionally developed by Cameron Cooke,...
2. Rounded Corners in Internet Explorer One of the reasons that I love Firefox and Webkit-based...
3. GoodCorner – Rounded Corners with Mootools GoodCorners is a tiny Mootools plugin that can apply the...
4. DHTML Rounded Corners Configuration Include files First, you need to include the js...
5. Nifty Corners Cube If you’re new to Nifty Corners, I suggest to look...

Do you like this post?

Email: