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.

ronan: :hover is something really

Submitted by Steffen on Fri, 06/02/2006 - 11:44.

ronan: :hover is something really tricky. I'm still looking for a way to do it (see also comments 37 and 39)...

lolita:
To 81: Would it be ok to have an RSS feed for these comments?
To 82: The next version will have support for preserving pixel heights.
To 83: Your "top: 50%;" / "top: -50%;" trick broke the border. No idea how to fix this in RUZEE.Borders, but here's a workaround using a wrapper DIV which works with version 0.10.1. That's basically a rule of thumb: Always use wrapper DIVs and you'll have much less trouble ;-).

Nicole: I currently know no way on how to get rid of the "slow IE problem"...

Abo: Does my blog posting help you (not

Submitted by Steffen on Tue, 05/30/2006 - 23:06.

Abo: Does my blog posting help you (not ;-))?

Trejkaz: I think I do that in the example.html coming with the distribution without having that problem... can you pastebin.com your problem? Thanks!

Hi DEM, if your boxes share the same

Submitted by Steffen on Wed, 05/24/2006 - 10:04.

Hi DEM, if your boxes share the same CSS .class, you can simply use the '.myclass' selector when calling draw(), e.g. myBorder.draw('.myclass');. See the three horizontally aligned boxes in examples.html which you find in the .zip file.

Version 0.9 is out. Supports background

Submitted by Steffen on Sun, 05/21/2006 - 04:51.

Version 0.9 is out. Supports background images inside the border - gradients rule! It also solves some of DarkAngel's padding problems.

Nicole: #68 maybe the Salvatore example

Submitted by Steffen on Tue, 05/16/2006 - 08:45.

Nicole: #68 maybe the Salvatore example is bit easier and gives you an idea. #69 background-images inside the border are not (yet) possible (see comment #67).

Dark Angel: can you pastebin.com your problems? Cheers.

David: Glad you like my lib ;-)! The

Submitted by Steffen on Mon, 05/15/2006 - 09:47.

David: Glad you like my lib ;-)! The background image thing for gradients is something on my list to do next. It will be restricted however... Still thinking about a nice way to deal with all this "background-postion:top/bottom", etc. stuff...

Nicole: The problem was the "width:100%; float:left;". If you remove that, then it works (have a look at the updated example). Tested on IE, Firefox, Opera, Konqueror. Is that the solution? If not: please upload your html somewhere and post the link... pastebin.com is one option. Thanks!

Please have a look at the example.html

Submitted by Steffen on Sun, 05/14/2006 - 12:04.

Please have a look at the example.html in the release zip. There are the IDs onlyTop and onlyBottom - similar to that I do it on my site.

Hi Nicole, I can't reproduce the

Submitted by Steffen on Sat, 05/13/2006 - 02:00.

Hi Nicole, I can't reproduce the problem. I fixed the 5-F typo (#FFFFF instead of #FFFFFF or #FFF) and put your example online. Works fine in FF 1.5.0.3 running on Linux...

Check out the new release 0.7.3 and the

Submitted by Steffen on Thu, 05/11/2006 - 13:08.

Check out the new release 0.7.3 and the Tips and Tricks section - Simon, that's it, right?

Yes and no... no background-color

Submitted by Steffen on Tue, 05/09/2006 - 14:22.

Yes and no... no background-color anywhere in the CSS/HTML means "white" with the fix I introduced in 0.7.2...

Hi "Lolita". I got your example. It was

Submitted by Steffen on Tue, 05/09/2006 - 13:47.

Hi "Lolita". I got your example. It was a bug in rzGetStyle. Fixed with the just released version 0.7.2. I cleaned up your code a bit and added some padding, so your layout won't shift. Thanks for the detailed fault report ;-).

Hey Emad, yeah, that's currently not

Submitted by Steffen on Tue, 05/09/2006 - 12:25.

Hey Emad, yeah, that's currently not possible... I guess I have to extend the API in order to support that (besides implementing it, of course). But there is a workaround until it will be supported "officially". It is limited to border- and shadow-less corners but looks better than Rico ;-). Here's the link.

Emad: Do you mean that the other

Submitted by Steffen on Mon, 05/08/2006 - 14:52.

Emad: Do you mean that the other corners are not rounded, so you get a DIV were only "lt" and "rb" are rounded at the same time? No that's currently not possible. You may use a work around with two DIVs (if you don't need a border). Do you have an example of what you want to do?

Now Kevin, you were fast. Actually too

Submitted by Steffen on Fri, 05/05/2006 - 10:38.

Now Kevin, you were fast. Actually too fast - there is a bug in 0.7 that makes problems with border widths of 0px (and style="border:none"). 0.7.1 fixes it - out now.

The Emad and Kevin edition of

Submitted by Steffen on Fri, 05/05/2006 - 09:26.

The Emad and Kevin edition of RuzeeBorders has been released. Version 0.7 supports other border widths than 1px, i.e. 2px, 3px, ...

It is currently not supported - but it

Submitted by Steffen on Wed, 05/03/2006 - 14:35.

It is currently not supported - but it is the next feature on my list ;-). The syntax will be simple: define the border width via the corresponding CSS value.

Version 0.6 with pseudo-transparency

Submitted by Steffen on Wed, 04/26/2006 - 15:03.

Version 0.6 with pseudo-transparency has been released.

Salvatore: from W3 CSS 2.1: "When an

Submitted by Steffen on Mon, 04/24/2006 - 12:14.

Salvatore: from W3 CSS 2.1: "When an inline box contains a block box, the inline box (and its inline ancestors within the same line box) are broken around the block. The line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes."

I have to use block DIVs inside the anchor element, so your inline DIV automatically becomes a block DIV. A workaround for you is to use left floats (".tbt { ... float:left; }" in your example). This even works without you having to modify your HTML source code (except the "clear:left;" maybe).

As for the hover background: Woa, that's a tough problem. I currently have no idea how this can be done... The antialiasing of the corners would have to be recalculated... The text color however is modifiable. Also other font settings (bold, etc.).

Anyone else having an idea how that background hover might be possible?

Salvatore: I don't get that one... Does

Submitted by Steffen on Mon, 04/24/2006 - 08:32.

Salvatore: I don't get that one... Does setting the DIV to display:block make problems? What do you mean with "writing more container"?

With the current version it's not

Submitted by Steffen on Sat, 04/22/2006 - 07:26.

With the current version it's not possible to have a background image. I'm working on that right now :-) - expect it for the next release.

Version 0.5 is out. It allows you to

Submitted by Steffen on Mon, 04/17/2006 - 09:56.

Version 0.5 is out. It allows you to only draw some corners/edges. Attention: The API changed due to that! Cheers to my bro and Emad for the feedback about the lack of the feature ;-)

Back from Bali - it was great! Emad:

Submitted by Steffen on Fri, 04/14/2006 - 07:19.

Back from Bali - it was great!

Emad: ad 1.: Planned for the next release, ad 2.: Can you explain what you mean with rounding radius? Cheers.

Rick: I like that approach - it should always work - I expect no problems. Maybe it's possible to generalize it even more, I'll give it some thoughts...

Stephanie: There are ways of doing it (via transparent colors), but one loses anti-alias support on some browsers. Maybe a future version will support borders over image backgrounds...

Version 0.4 is out. It replaces 0.30...

Submitted by Steffen on Fri, 03/31/2006 - 06:11.

Version 0.4 is out. It replaces 0.30... It includes Darios suggestion (official class support) and does no longer flip your page. Concerning mikes comment: There may be problems with absoulte positioned DIVs (or even not-static positioned). I'll have a look on that.

Joern: You need some adaptations of the

Submitted by Steffen on Sun, 03/26/2006 - 02:58.

Joern: You need some adaptations of the style.js - well basically your own style.js which renders all classes/IDs of your page with the right border settings. Some JavaScript knowledge is currently required for that. Have a look at the example.html file included in the release.

Hey Todd. Cheers for that one. But

Submitted by Steffen on Thu, 03/23/2006 - 15:28.

Hey Todd.

Cheers for that one. But this fix may break IE 5.5 compatibility - do you have a test case, i.e. some example html file/web page for testing purposes? The font size stuff is for IE 5.5 only. And I've never experienced font size problems on the sites I've tried...

Steffen

Version 0.30 now has a work around for

Submitted by Steffen on Sun, 03/19/2006 - 10:52.

Version 0.30 now has a work around for the white boxes in Safari!

Michael: Nice idea. I'll check if this

Submitted by Steffen on Sun, 03/19/2006 - 02:25.

Michael: Nice idea. I'll check if this won't break compatibility. Right now I'm not sure if it's possible to access "unknown" CSS values with todays browsers via JavaScript.

mike: as for comment 10 try the class

Submitted by Steffen on Fri, 03/17/2006 - 12:24.

mike: as for comment 10 try the class trick of comment 7. and on comment 11: what version of Firefox are you using?

As I have no access to a Mac OS X

Submitted by Steffen on Wed, 03/15/2006 - 13:11.

As I have no access to a Mac OS X machine (yet) I currently can't really tell... Someone having any experience here? Btw.: I just returned from the CeBIT.

There is support for selecting elements

Submitted by Steffen on Tue, 03/07/2006 - 01:52.

There is support for selecting elements by class - although it is hidden a little bit. Here's an example:

rzCrShadowBorder(4, 4).draw(rzGetElementsByClass('myClass'));