ShadedBorder - JavaScript Round Corners with Drop Shadow

You should also check out my script Liquid Canvas which uses HTML canvas to render rounded corners with drop shadows.

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

Comments have been closed - please use the Forum.

Also check out my Liquid Canvas script - it uses HTML canvas to do rounded corners and more and will be the successor of ShadedBorder once.

Version History

  • 2009-06-20 - v0.6.2: Fix 1px overlap on IE7 + IE8, speed-up
  • 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.

Comments have been closed - please use the Forum.

Great script Steffen! Really enjoying

Great script Steffen! Really enjoying it. I wanted to ask if there's a way to tweak the offset of the drop shadow at all? I'm no expert in js so I thought I'd check with you before trying things out myself! Cheers cheif!

sorry, just found out what causing me

sorry, just found out what causing me the problem. I put the layers incorrectly on the href, made my href unclickable. Fixed that yesterday, however, with some height setting on the box's DIV, I found out that the 2 bottom corners of the box are not rounded perfectly. Does anybody face the same issue? Thx

Nice! Any way to stop the flickering in

Nice! Any way to stop the flickering in IE6?

Hi guys, I'm having problem using this

Hi guys, I'm having problem using this script. In IE7 and 6, the code works just fine, however in Firefox and Safari, when I put the DIV, it made all my href unclickable. Does anybody know what might cause this? Thx alot.

[...] отличии

[...] отличии от предыдущих двух скриптов, ShadedBorder умеет не только закруглять уголки блокам, но и [...]

@Piotr (comment 325) Would you share

@Piotr (comment 325)
Would you share your memory leak fix please.

TIA

Hi, this is really outstanding work!

Hi, this is really outstanding work! thank you very much for sharing.

i did integrate it with a nice popup from here http://jqueryfordesigners.com/coda-popup-bubbles/

and you can see it working here: http://www.moossen.net/test.html

Where is works perfect for all browsers except IE :(

the problem is that the background is transparent, i tried to remove the transparent background replacing line 185 of the render function:

sty(el, { position:"relative", background:"transparent"});

with

sty(el, { position:"relative"});

so, the background looks good again, but not the border :(

any idea what else could i try?

thank you very much again

I was snowblind. As soon as you define

I was snowblind. As soon as you define a height for the p inside the box, IE7 knows how much space to fill.
#round_me {
padding: 10px;
width: 160px;
margin: 10px auto;
float: left;
}
#round_me p {
border: solid 1px yellow;
height: 75px;
}

I guess playing with min and max height will work fine as well. By the way: there was a comment from someone saying js is the wrong way to do it when you are working with css... (Matt, comment #335) Well Matt, if you got something comparable without js then let us have it. I have been searching for hours and using only css never provided a solution that was half as efficient - and that looked only half as good.

Great Work, Steffen!

Really Really nice work and - as

Really Really nice work and - as promised - really, really quick... too bad I couldn´t try with Safari either lacking a Mac, I am sure I would have tried to help. But maybe someone here has an Idea on the following:

When fixing the height AND padding of a box´s style and resizing , I get a transparent gap in the box exactly double the size of the padding once the browser window IE7 is resized...
I need to set a fixed height because I need to line up the boxes with rounded borders and shadows in to rows next to an image which will be as high as two boxes (plus the margin)

Example:
#my-border {
padding:10px;
width:140px;
height:75px;
margin:10px auto;
color:#fff;
}

I couldnt solve the problem cleaning the objects in the render function (node=null;iel=null;twc=null;mwc=null;bwc=null;el=null;) nor using meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"... nor by adding if (el==null){ el = “”;}

I thought IE7 was not correctly defined in the function, but the resize function is called when using IE7 just like it is when using IE6...

Or am I just too fixed on defining the height of THAT CERTAIN box? Maybe I should simply define another div around the row of boxes, you say? Sure, but then how should I get the boxes to automatically wrap into a second row next to the image... hmmm...

had no problem running the code ,

had no problem running the code , except getting an error that says 'el is null' in shadedborder.js line 214

fixed by adding this line right above it:

if (el==null){
el = "";
}

[...] ShadedBorder - JavaScript Round

[...] ShadedBorder - JavaScript Round Corners with Drop Shadow: This script helps to give my CSS boxes round corners, including the borders. This reduces the effort of generating a lot of corner images if you have a lot of different boxes to apply to. [...]

meta http-equiv="X-UA-Compatible"

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

This is the only fix I've found which

This is the only fix I've found which corrects ie8's current lack of filter opacity support:

KC

Hello - I checked a site I did using

Hello -
I checked a site I did using ruzee in IE8 and the drop shadows are all hard edged at 100%. Has anybody yet found a fix for IE8? Maybe it has to do with the png transparency support...

I see a couple other posts about IE8 concerns but with no reply. Anybody?

Thanks,
KC

Hi, I have a div that is fixed

Hi,

I have a div that is fixed aligned to the bottom right hand corner of the page (don't ask!).

When the page loads it is in its normal position.

A fraction of a second later - once the page onload function runs, the div (which is now correctly rounded) jumps to the bottom left hand side of the page.

Anyone else notice anything like this with fixed positioning?

[...]

hi, I've stumble upon your

hi,

I've stumble upon your javascript lib and it kick's ass. I got round corners with nice Photoshop-like drop shadow in no time.
Yet I've got a little problem, maybe I'm not using the lib properly.
In a HTML I have a wacking big DIV filling the entire page with in it a bunch of DIV.

some stuff

some stuff

some stuff

I want the "global" DIV to have round corners and a drop shadow. When I apply the renderer to the "global" DIV it doesn't give any visual result. What I did in the end is apply a "top borders" renderer to the "header" DIV and a "bottom borders + shadow" renderer to the "footer" DIV.
It works, but is there another way of doing so?

Anyone get Opposite corners working?

Anyone get Opposite corners working? I'd like to have the top right and bottom left corners of a box rounded.

Take a look at my site: When I

Take a look at my site:

When I render two boxes with rounded corners shadedborder everything works fine, but when I add three it starts having problems. Please let me know what you think.

Design in your JS instead of your CSS?

Design in your JS instead of your CSS? You're doing it wrong ;)

Hi. I found that adding the following

Hi. I found that adding the following line at the end of the render function really helped ie with the memory leak:

node=null;iel=null;twc=null;mwc=null;bwc=null;el=null;

I believe that the problem with ie is that the cleanup is too cautious. Setting finished items to null appears to help the cleanup decide that they really are not used anymore.

Oh, and in porting from an earlier version, I had to comment out the line sty(el, { position:"relative", background:"transparent" });, or change the relative to absolute, if I was using an existing div I had already positioned in the correct place (otherwise it ended up somewhere off the bottom of the page). Perhaps that is just my use of the library though.

Thank you for a great library :)

I am using your borders with asp.net

I am using your borders with asp.net but when i use your java script my update panel is not working why is it so???

Hi, your library is perfect. But I did

Hi, your library is perfect. But I did not find how to make a round corners for an image like here:
http://www.curvycorners.net/examples/demos/demo2.html

Another thing is that I need to put a inner shadow to the image.

How to do this? Can you provide some part of the code or make an example of this? It would very nice.

Thanx

Ok - I fixed the above problem by

Ok - I fixed the above problem by adjusting border/shadow/corner sizes. My new problem is that IE7 doesn't seem to respect the border sizes - the content of the div with ruzee applied pops out the right-hand side, completely spoiling the effect. Works fine on ff and safari of course, but I am required to have IE compatibility :/

I am having a lot of trouble getting

I am having a lot of trouble getting the drop-shadow to display. Do I need to use one of the gradient pngs? Also - does the ruzee border happen inside or outside the div border/margin/padding?

Hi, I tried changing the 2048px value,

Hi,
I tried changing the 2048px value, but in IE7 (i have the borders disabled in ie6 due to other problems - content disappearing) but with values bigger than 4048px the side shadows won't work.

All i get is a box of my border's color on either side of my div.

Unfortunatelly this script looks b0rked

Unfortunatelly this script looks b0rked when using tiled pngs. As you can see in this screenshot on firefox (same thing happens on ie7): http://i37.tinypic.com/2i8ch77.png

It seems that when you apply a tiled image the tiling just gets out of place :-/

This was generated using:

var header_border = RUZEE.ShadedBorder.create({ corner:15 });

@Piotr I forgot to say that yes FF

@Piotr

I forgot to say that yes FF works like a charm!

@Piotr I will check out the DRIP

@Piotr

I will check out the DRIP thanks for the tip. For the time being I will have to go back to Nifty.

Many Thanks

Juan

@Juan Blanco Yes, there are memory

@Juan Blanco

Yes, there are memory leaks when using the script under IE. This however is a IE problem. Under oher browsers like Firefox, there are no such leackages. When reloading the page ijn IE the memory leaks will become visible. Using multiple pages in your browser, or reloading the page many times, may make IE slow or even may crash the browser. Use for instance the DRIP program to check for leackages.

I did a tweak of the script which avoids the memory leaks.

Piotr