ruzee.com - Steffen Rusitschka

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

Have a look at the full-featured example, the simple example, or just download the whole library as a ZIP archive (MIT licensed).

Version History

• 2007-12-04 - v0.6.1: Fix transparency on IE7
• 2007-12-02 - v0.6: Semi-transparent fat borders (thanks Ryan) and IE6 hover fixes (thanks NewTrax)
• 2007-10-23 - v0.5: More robust DIV creation, add split borders example for headline/content (for Virsir)
• 2007-10-21 - v0.4: Add graceful degradation, simplify usage, fix IE7(?)
• 2007-10-20 - v0.3: Gradient background support, speed improvements
• 2007-03-27 - v0.2: Fix IE: check boxes inside tables were disappearing
• 2007-03-25 - v0.1: Initial release

How-to

Some steps are required to make your page use ShadedBorder:

Include ShadedBorder to your HTML header section:

<script src="shadedborder.js" type="text/javascript"></script>

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):

<div id="round_me"> 
   <p>I want to be rounded!</p>
</div>

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”:

...  
<script type="text/javascript">
  border.render('round_me');
</script>

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.

Tags: round corners, drop shadow, javascript, anti-aliasing