RUZEE.Borders - Round Corners with JavaScript

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

Comments have been closed - please use the Forum.

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

Version History

Check out the version history.

Comments have been closed - please use the Forum.

yep, worth a try - check out the "Known

Submitted by Steffen on Wed, 03/14/2007 - 06:28.

yep, worth a try - check out the "Known Bugs and Limitations" section: !!! 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).

@mytradex: Did you position every

Submitted by Steffen on Wed, 03/14/2007 - 05:13.

@mytradex: Did you position every floated element relative? (position:relative, whenever something is float:left/right)

@Andrew: Sorry, I never tried

Submitted by Steffen on Wed, 03/14/2007 - 02:28.

@Andrew: Sorry, I never tried ...
@mytradex: Can you put the page that breaks online?

@Michael: IDs have to be unique within

Submitted by Steffen on Sat, 02/24/2007 - 00:14.

@Michael: IDs have to be unique within an HTML document - that's why only the first element with a given ID will be rounded. As for the height issue: That's strange ... screenshot?

@rudy: A wrapper may solve your

Submitted by Steffen on Wed, 02/07/2007 - 00:40.

@rudy: A wrapper may solve your problem: <div id="static-wrapper"><div id="element-to-round">lalala</div></div>

@Andy: borderType:"glow" is what you're looking for.

@Stephan Wehner: Guess it runs out of memory ;-)

Nathan: It's because of the Konqueror

Submitted by Steffen on Tue, 01/16/2007 - 05:29.

Nathan: It's because of the Konqueror hack with black being transparent. Try using #010101 as your body's background color.

@sabat: INPUTs are kind of tricky. With

Submitted by Steffen on Mon, 11/13/2006 - 16:28.

@sabat: INPUTs are kind of tricky. With the "right" settings, text inputs/areas may look ok - never tried it, though.

@Kenneth Chin: strange... I've seen something similar before and it was related to a non-standard font size (OS wide, not just browser specific). Does IE7 help?

Kenneth: Can you post a screenshot on

Submitted by Steffen on Sun, 10/29/2006 - 01:54.

Kenneth: Can you post a screenshot on that? I'm testing with IE 6 and I don't get any gap...

@Luigi: Don't know your IE settings,

Submitted by Steffen on Sun, 10/22/2006 - 00:54.

@Luigi: Don't know your IE settings, but I guess you just have JavaScript warnings enabled - which the average user does not...

@jaschulz.154: strange... very strange... can you upload an example somewhere? pastebin.com may be your friend.

@jaschulz.155: That's a known limitation (see changelog entry for version 0.9). And without reading out offsetHeight periodically - because your content may change - I know no solution. That solution however is so ugly, I never really decided to implement it...

@Russ: 0.16.1 fixes the Safari issues.

Submitted by Steffen on Fri, 10/06/2006 - 14:11.

@Russ: 0.16.1 fixes the Safari issues. Safari doesn't like "var x=123; var y={ x:x };" changed it to "var xp=123; var y={ x:xp };" and voila! Please try it.

@tucker and Russ: Try version 0.16 - it

Submitted by Steffen on Sat, 09/30/2006 - 07:33.

@tucker and Russ: Try version 0.16 - it should be much more "compatible".

@Andrew: Cheers! I've tested version

Submitted by Steffen on Sun, 09/17/2006 - 08:06.

@Andrew: Cheers!
I've tested version 0.15 with tinymce 2.0.6.1 and it worked with FF, IE, Opera.
Drag&Drop: can you try version 0.15? If it doesn't work, well hell ;-). Can you send me an example? Cheers!

@Roy: Cheers! And to your question:

Submitted by Steffen on Sun, 08/27/2006 - 10:19.

@Roy: Cheers! And to your question: Jep, that's by design. The right navigation boxes on my page are an example why this makes sense. Have a look at comment #129 for a workaround.

@Jakob: I found a different solution.

Submitted by Steffen on Fri, 08/25/2006 - 12:50.

@Jakob: I found a different solution. Check out version 0.14 ;-). Oh and sorry for this spam prevention thing. Unfortunately "fixing" it would mean loads of efforts inside the Wordpress code... Guess I won't do that. Maybe I'll switch to Typo4 in the near future, anyway... Well. For the moment, we'll have to live with it.

@Steve: Hard ones... for moving: an

Submitted by Steffen on Mon, 08/21/2006 - 09:15.

@Steve: Hard ones... for moving: an outside wrapper DIV may do the trick - if it rezeives the event, where I'm not sure about. The resize may work, if you try to resize an inner DIV and have no height specified at the DIV you are "bordering".

@Jakob: Well... the size of an "em" may change inside the browser (e.g. Ctrl-Mousewheel). But anyway, I like the idea. Do you know a JavaScript lib that implements this?

@Jakob: Now that Opera 9 came out,

Submitted by Steffen on Wed, 08/09/2006 - 12:14.

@Jakob: Now that Opera 9 came out, Konqueror is the only reason not to use opacity - well, kind of a reason ;-) - opacity borders are tough, but the next thing on my list - whenever I find a solution and some time (it's quite busy right now...)

@Milan: Try putting an internal wrapper DIV with a negative margin - maybe that solves the 26 pixels problem (never tried that on my own...). The "do not round the top left corner" thing is possible with RUZEE.Borders as long as you don't need a shadow (and as long as you accept hacks ;-)). Here's an example. The trick is to use an outer DIV that renders the non-round corner.

@Martin: woa... prototype... well, no

Submitted by Steffen on Thu, 08/03/2006 - 12:14.

@Martin: woa... prototype... well, no idea what it does to RUZEE.Borders... This rule!="extend" is a real hack. Until I find the time to have a closer look at this, I think your workaround is ok.

@Jakob: yeah, em is not supported - and will never be. This is due to the fact that RUZEE.Borders calculates everything in pixels - and has to... I suggest you use wrapper DIVs (at least for the margin).

Derek, that's strange. The code should

Submitted by Steffen on Wed, 07/26/2006 - 11:47.

Derek, that's strange. The code should work like that. Do you have an example online that I may try out and look at?

Version 0.13 fixes the problems with

Submitted by Steffen on Sat, 07/08/2006 - 09:34.

Version 0.13 fixes the problems with fixed heights beeing calculated negative - Chris, this should do the trick with "height:20" ;-).

Chris, IE says "Error on page" which

Submitted by Steffen on Thu, 07/06/2006 - 00:55.

Chris, IE says "Error on page" which means that there's a bug in the JavaScript... I found out that changing "height: 20" for your banner when doing RUZEE.Borders.add() to 30, it works fine. I'll check on the weekend why RUZEE.Borders don't like this height value in IE and release an update.

And btw: Please have a look at the Restrictions section above: "... #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."

@Mark: wrappers are your friend most of

Submitted by Steffen on Sat, 07/01/2006 - 06:37.

@Mark: wrappers are your friend most of the time something doesn't look as expected - I'm glad you've found a solution.

@Adi, Lolita, etc.: Version 0.12 doesn't have the "unresponsive script" problem any more - please try it and tell me if it works for you.

@jonah: cookies are always transferred

Submitted by Steffen on Mon, 06/26/2006 - 10:09.

@jonah: cookies are always transferred to the server - RUZEE.Borders generate kilobytes of HTML - I guess that won't make much sense...
Do you have an example for the flashing borders (pastebin.com)?

@Adi: Yeah, this unresponsive script happens on slow machines with pages that heavily use RUZEE.Borders. What machine is it? Did it happen with my page?

Hi Brian, RUZEE.Borders do not use

Submitted by Steffen on Sat, 06/24/2006 - 02:21.

Hi Brian, RUZEE.Borders do not use opacity and hence shadows cannot be transparent to show the background image \"beneath\". That\'s why.

hey mP, thanks alot for the

Submitted by Steffen on Mon, 06/19/2006 - 12:53.

hey mP,

thanks alot for the suggested fix. Unfortunately its not that easy... The width of a table is determined by the sum of the maximum widths of each td inside one column. If you put a SPAN around the table this will do the trick and its size will be the size of the table.

RUZEE.Borders however will put lots od DIVs (display:block) inside that SPAN that will - in turn - make a DIV out of this SPAN (see my comment #39).

I'm right now playing around to remove this restriction - there were lots of comments here about RUZEE.Borders changing display:inline (SPAN) to display:block (DIV) of rounded elements - but I can't promise anything right now...

Chris: Neat idea. But I guess with the

Submitted by Steffen on Sat, 06/10/2006 - 09:17.

Chris: Neat idea. But I guess with the :hover feature, where I have no idea, how to implement it, this might be kind of tricky to do... with zIndex, relative positioning, there might be a way to do it with version 0.11... Anyone tried that?

Fred, HTML is very strict when dealing

Submitted by Steffen on Sat, 06/10/2006 - 03:37.

Fred, HTML is very strict when dealing with tables. Inside a TABLE element, only TBODY, TR, etc. is allowed. Inside a TR only TDs are allowed. Inside the TD you can again do, whatever you want. So put FORMs and RUZEE.Borders only outside the TABLE element or inside a TD - this should solve your problem.

The problem with td._menu_item not

Submitted by Steffen on Tue, 06/06/2006 - 13:17.

The problem with td._menu_item not having the right width is because IE is not running in strict mode when you put a comment before the DOCTYPE.

Unfortunatly there is an endless loop with RUZEE.Borders on your page when it tries to render the #div_user in strict mode. I\'ve tried to reproduce the problem in a \"clean-room\", but had no success. Maybe it is related to the absolute positioning of that DIV. Can you try to put some wrappers around?

What is this environment? Can you post

Submitted by Steffen on Tue, 06/06/2006 - 00:12.

What is this environment? Can you post a link to the page that crashes?

Hey Potato Bob, you don't have to

Submitted by Steffen on Mon, 06/05/2006 - 14:44.

Hey Potato Bob,

you don't have to specify width and height. Your elements can get the width from some outer DIV and the setting of the height is just required if you want multiple bordered elements having the same height. RUZEE.Borders fully support liquid heights and, for example, something like "width: 80%;" - have a look at the header and footer of this blog for the "liquid" widths and at the posts on the main page for the heights given by the text content.

The settings for "static widths and heights" are just an additional feature.

Hope that helped, Steffen

A new version is out: heights can be

Submitted by Steffen on Sun, 06/04/2006 - 07:33.

A new version is out: heights can be specified, widths directly set on the element (no wrapper required), and it comes with fixes and speed improvements.