RUZEE.Borders has been replaced by RUZEE.ShadedBorder.

RUZEE.Borders, formerly known as RuzeeBorders, is the first and only JavaScript library for rendering shadows and anti-aliased rounded corners inside a web browser without the designer needing to create background images. You can easily include it into your web site/blog etc. with only minor knowledge about JavaScript.

Features

  • Border style definition via CSS and CSS-like JavaScript
  • Anti-aliased rounded corners similar to the successors of Nifty Corners
  • A symmetric shadow similar to the ones of Mac OS X
  • Configurable border widths
  • Outside as well as inside background image support (gradients)
  • A kind of glow which is based on the shadow feature with a configurable color
  • A fade effect which lets the border color fade into the background color
  • All that at every edge/corner or only at some of them
  • Works on all modern browsers, even Opera and Konqueror
  • Colors and layout of the borders are defined in the CSS – if JavaScript is disabled your web site looks like its cubistic twin 😉

Supported Browsers

These are the browser I’m testing my releases with (and others may work as well):

  • Internet Explorer 6.0
  • Firefox 1.5
  • Safari 2
  • Opera 9
  • KDE Konqueror 3.5

Usage

When rendering borders, CSS is used for all border style settings that can be definied via standard means. These are: border-width, border-color, etc. Here’s an example CSS fragment:

#myborder {
  border: 2px solid red;
  background: blue;
  padding: 10px;
}

If you have an HTML element with the ID ‘myborder’ in your HTML document, it will show up blue with a 3px wide, red solid border. This is the standard CSS way and works without RUZEE.Borders (of course ;-)). Make sure to always apply some padding, because RUZEE.Borders will “eat” some of it!

All style settings that are not available in the current CSS standard, i.e. everything that RUZEE.Borders need to round, shadow, glow, etc., have to be set via a CSS-like JavaScript code fragment in your page. Check out the tutorial or the example HTML file for details on how to do that (included in the download ZIP file). For now, have a look at the following examples – the borders you see are rendered by the definition inside – the value before the colon is a CSS selector, the values after it the style settings.

Draw a simple border with the corner radius of 4 pixels around the HTML element with the ID ‘rbex1’:

Draw a glowing border with an edge radius of 4 pixels and a blueish glow that has a width of 5 pixels around the elements with the ID ‘rbex2’:

Draw a border with a corner radius of 4 pixels and a shadow with the width of 5 pixels around the element with the ID ‘rbex3’:

Draw a border with a corner radius of 8 pixels that fades out to the color of the background around the element with the ID ‘rbex4’:

Draw a simple border, but round only the left/right bottom (‘l’=left, ‘r’=right, ‘b’=bottom):

Draw a simple border, but round only the left on bottom/top bottom (‘l’=left, ‘t’=top, ‘b’=bottom):

Draw a simple border, but round only the top left corner (‘l’=left, ‘t’=top):

All borders can have a background image inside. It will be aligned to the top and can only be drawn inside the upper border. But together with repeat-x, this limitation isn’t as bad as it seems – it’s perfect for all those nifty Web 2.0 style gradients ;-). This example shows, that the image is really in the top of the border – clear gradients are possible this way.

Simple borders can be put on top of a background image using pseudo-transparency. I’ve decided to not use the CSS3 opacity or similar techniques due to the reasons described here, which means that you have to set a background color “similar” to the color of your background image:

As you can see, you do not need to specify any color values at all for the border, background, etc. only for the glow where there is no CSS style value that could be “misused” for that issue…

In the examples above, only ID based CSS selectors were used. The library included supports all the things you know from CSS and more (have a look at the credits section).

Download

Feel free to download RUZEE.Borders v0.16.1. The license is included in the archive, it’s MIT-style. Have fun playing around with the lib and if you have any suggestions, bug fixes, etc. please comment at the end of this page.

Credits

For the CSS-like selection of DOM elements, I’m using a CSS level 2 customized version of Dean Edwards’ cssQuery, thanks for this cool piece of code!

I’m also using a JavaScript CSS color converter that I stripped down to my requirements – cheers go to Stoyan Stefanov for that.

Tips and Tricks

To speed up the loading time of your page, especially if there are lots of images or IFRAME ads (e.g. Google), use the domload event of RUZEE.Events.

If you are using the Google Web Toolkit and want to add rounded corners to your site, check out the RUZEE.Borders based rounded corners component by Alexei Sokolov.

Internet Explorer displays a page very soon. If you want a blank page till RUZEE.Borders finished rendering, add the following lines to your page code:

CSS (hides HTML body when JavaScript is enabled):
* html body { display:expression('none'); }

HTML/body.onload():
RUZEE.Borders.render(function(){
  // rendering finished, now show the body
  document.body.style.display='block';
});

You can instantiate RUZEE.Borders.Border directly and call its render() method, if you know the DOM elements you want to put borders around. That’s ideal for 3rd party libs using RUZEE.Borders (e.g. GWT, hint!!! ;-)).

For “askew” corners, e.g. let only top-left and bottom-right be rounded, but the other two right angle, have a look at the Emad Workaround.

A nice design idea came from Simon – put your inner title on top of your corners.

Known Bugs and Limitations

Quirks Mode is not supported.

!!! Floated elements inside a rounded border have to be positioned relatively (i.e. style=”float:left; position:relative;”) !!! Not doing so will mess up Internet Explorer’s rendering completely (The Peekaboo Bug is responsible for that).

If you want a DIV with a fixed height, heights have to be specified via CSS and the height attribute of a RUZEE.Border (via RUZEE.Borders.add(...)), because the height of a DIV cannot be read from the CSS properties reliably on all browsers.

Konqueror has a bug when getting the styles for an element. RUZEE.Borders try to calculate the background color recursively until they reach an element with a non-transparent background. Konqueror unfortunately returns #000000 when the background is transparent. Hence #000000 is interpreted as transparent. If you want a black background using #010101 in your CSS is a possible workaround – assuming “almost black” is ok for you (see also my blog posting on that issue).