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.

I've consistently gotten browser

I've consistently gotten browser discrepancies between mozilla 3.0 and IE7 with Ruzee borders. Typical result is more padding in IE. Everything is reset so it's not a CSS issue. Wondering if you've ever come across this.

I've read the comments and it says it's

I've read the comments and it says it's compatible but when i try this site with IE 7 it doens't show any rounded borders, nor glow or shadow.

Thanks for this great info. Easiest way

Thanks for this great info. Easiest way is use this generator: http://www.roundz.net/

Great to see further progress on the

Great to see further progress on the library.
Just to toss a wrench in things, has there been any discussion yet of how RUZEE will stand up against IE8? i realize most of the issues will be CSS-related, but since JS is manipulating it......

My current plan is to strip down a lot of the "dressing" for my site during probably a lengthy transition, but if at least some of the aesthetics work correctly, it'd be nice.

Thanks, the explanation and library

Thanks, the explanation and library very useful to me.

One of the very few to include

One of the very few to include Konquerer. I'm proud!

What about other adapters like jQuery,

What about other adapters like jQuery, Prototype etc.?

Whoops. Sorry. My Mistake. You can

Whoops. Sorry. My Mistake.
You can disregard the last post as I meant to post to the ShadedBorder page.

-Ben

I am trying to get the script to work

I am trying to get the script to work with a site I am developing, but having absolutely no luck in IE despite trying this on only an extremely simple scenario. Maybe someone could take a look and see what I am doing wrong? It is some very strange buggy behavior which results in the box looking oddly until you mouse over the selected area. Yet, I have no onmouseover or hover style selector.

Thanks,
Ben

Hi again, Ok it's nice on my firsts

Hi again,
Ok it's nice on my firsts tests. Now the troubles appears in javascrit: I wanted to get some "children" of a div (for example)... As you modify the DOM strucuture, lot of my scripts are broken...

But really, it's a great script. Good work.

Your javascript uses document.write

Your javascript uses document.write which is not compatible with a pure XHTML page. Please could you provide a workaround? See http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

Thanks once again.

Links seem to be disappearing in

Links seem to be disappearing in Firefox when within an iFrame. Also, the links dont render when they are below the window scroll... its probably something silly that I'm doing wrong, but I cant figure it out for the life of me. Check it out here: http://nexus.epinetwork.com/tmp/example.html

Any ideas much appreciated =)

sweet i'm using it on my

sweet i'm using it on my website!

Hi Mitchell - I thought divs were block

Hi Mitchell - I thought divs were block elements ? Which you transform into inline elements with display:inline ... I must be missing something here from your explanation?

Ruzee is on the right track, but

Ruzee is on the right track, but unfortunately it is buggy, so I cannot use it. It appears that Ruzee makes the most fatal and basic error possible -- it does not respect the display:inline property of divs. A div before Ruzee looks normal, but afterwards with Ruzee it is erroneously stretched to 100% of parent and all contents outside are erroneously pushed to a new line.

Hello! We have rebuilding our site

Hello!

We have rebuilding our site and we consider to use your fabulous ShadedBorders, but we found a bug in IE6: our new pages have fixed header and footer with CSS, and when we put ShadedBorders to the elements that "floats" between it (DIVs), the scroll bar or IE moves but the content no. In IE7 and Firefox it works well. Anyone knows what is the solution? Thanks a lot!

Xavier

Setting the 'height' property for divs

Setting the 'height' property for divs doesn't work correctly. The div takes up the space specified in height but the border is only drawn around the content.

Has anyone else come across problems

Has anyone else come across problems with parts of flash disappearing if an element such as a suckerfish menu opens on top of it when using the Ruzee.shadedborders?

If I change the wmode to transparent it disappears entirely - but without the shadedborders element in the page it works fine.

Hey, I want to report an odd bahavior

Hey, I want to report an odd bahavior when rendering shadedborders inside a div and with fluid width. You can browse what I mean at http://www.bookplus.net/ruzee.html. At least IE7 seems not to validate the screen properly when resizing the bowser window (at the lower part example png).

This happens especially when widths are specified in css for divs that should be rounded.
Oddly, when spcifying a 100% width the result overflows.

offtopic: your website misses to set a

offtopic: your website misses to set a background color for this text area, which is gray if you install a gray color theme for KDE. Looks quite strange with these white based images :-)

Iteresting library anyway!

Regards,
F.

Good afternoon...I am trying to place a

Good afternoon...I am trying to place a background image inside of a div with a 'glow' border. I need to position it to the right, but even with 'background-position' set to "right" it only appears on the left side.

Is the 'background-position' parameter somehow disabled when used with these borders?

Thanks!

If any of my fixes that I have

If any of my fixes that I have mentioned are bad/not legit/awful/suck let me know.

Cheers

Steffen, here is my fix for for the

Steffen, here is my fix for for the issue I was having in IE with the Top & Bottom not drawing after ajax call.

I added this call to the render function.
RUZEE.Borders.cache=0;

I presume that this clears out the cache object that was not being removed/reinitialized in IE for subsequent calls. On a subsequent call the old Ruzee.Borders.cache object in the crTB function was being detected an then being cloned (empty).

Steffen, I made a test area to show you

Steffen, I made a test area to show you what is going on with the problem I have in IE. http://www.mytradex.com/ruz I am calling the RUZEE.Borders.add function along with RUZEE.Borders.render() without refreshing the full page. The first time the page loads the ruzee border works fine in IE. I have a link called "Reload RuzeeBoarders" and it is suppose to change the text inside the graphic and reload ruzee boarder on my element without refreshing the full page. What I get is the ruzee border on the left and right and not the top or bottom. All works fine in firefox. If you have a suggestion I'd appreciate it.

Steffen, I found the problem I had an

Steffen, I found the problem I had an element named "b". This was conflicting with your function in ie. The "b" was set as an element in IE. I have no ideal why. So I changed your code by adding "var" to the beginning of r,g, and b lines. This seemed to solved IE throwing the error. Now in IE I get the ruzee boarder. However, on the first call to ruzee border I get all sides, on the second call I only get the left and right to ruzee not the top and bottom.

function rzC2S(c){
if(typeof c==’string’) return c;
var r=’0′+c[0].toString(16);
var g=’0′+c[1].toString(16);
var b=’0′+c[2].toString(16);
return ‘#’
+r.substring(r.length-2)
+g.substring(g.length-2)
+b.substring(b.length-2);
};

Hi Steffen, as everyone says, really

Hi Steffen,
as everyone says, really cool script although I am not an expert at JS and I can't seem to implement this bit of code that you mention for IE diplaying the page only once the script is loaded.

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';
});
Would you look at my site and let me know how and where I should include it so it does not show this jumping effect.
Thanks a lot,
M.

Ok I read the Known Bugs section and it

Ok I read the Known Bugs section and it mentions that if you have floated elements inside the rounded corners, mine are outside the rounded corner. However, I went through and checked my floated elements and added the position:relative to that element and I still get the same IE error.

yep, worth a try - check out the "Known

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

You bring up a good question. The left

You bring up a good question. The left column (yellow box) has the following css: which allows for a fluid 3 column site template.

#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
z-index: 0;
}

Now inside that left column I have your script displaying the rounded corners which has no floating elements.
R U saying that I need I may need to add a position:relative to the #leftcolumn element.

@mytradex: Did you position every

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