A Tutorial for rounded corners with drop shadows

There are many ways to do rounded corners on web pages. This tutorial describes a solution based on RUZEE.Borders. It shows how the web page has to be structured and how to add a drop shadow to an HTML element - everything without using any pre-rendered images.

Step 1 - HTML/CSS basics

We'll start with a simple HTML page. The body of the page is pretty simple:

<div class="bordered">
  <p>This is the paragraph</p>
  <p>This is another paragraph</p>
</div>

The DIV, which has the class "bordered", is used to define the width and the style - in our example for drawing a border around. There are two paragraphs in this inner DIV, basically to add some text so we've got something to read ;-).

The definition of the class, i.e. the definition of the style of the HTML elements on the page, takes place in an internal Cascading Style Sheet (CSS):

.bordered { 
  width:200px; 
  border:3px red solid; 
  padding:30px; 
}

The DIV will get the width of 200 pixels by the class definition ".bordered" (which is a CSS selector). It will also get a solid red border with a width of 3 pixels and a padding of 30 pixels which lets the text inside have some spacing to the red border. This padding will be important later on, when we round the border. Ah, right - of course up to now, the border is not rounded and there's no shadow. We've just used basic HTML/CSS methods to get our result.

See how the whole page looks like here (and view the source code, of course ;-)).

Step 2 - Let the script round it

To round the border, RUZEE.Borders and its dependencies have to be included. This is done with the following lines in the header of the HTML document:

<script type="text/javascript" src="cssquery2-p.js"></script>
<script type="text/javascript" src="ruzeeborders.js"></script>

The first line includes cssQuery, a library by Dean Edwards that makes CSS selectors usable via JavaScript. The second line includes RUZEE.Borders.

Once the scripts have been included, they can be used via "self-made" JavaScript code. So, let's round the border from "Step 1" now:

RUZEE.Borders.add({
  ".bordered" : {
    borderType:"shadow",
    cornerRadius:15,
    shadowWidth:10
  }
});

As you can see, this looks similar to the CSS definition. We see the CSS selector ".bordered" again and the meaning is just the same as within CSS: all properties afterwards will be applied to the HTML elements matching the criteria. In our example, this is the one DIV in our page.
It will get a shadowed border (borderType:"shadow") with a corner radius of 15 pixels and a shadow width of 10 pixels.

The terms explainedThe image on the right explains these terms. The corner radius is the number of pixels from the center of the corner to its border (inclusive): "c" in the image.

The shadow width is the number of pixels from the border (exclusive) till the shadow is completely faded out: "s" in the image.

The previous code snippet however doesn't do the actual rendering of the round borders. It just defines how to do that. The rendering is done via RUZEE.Borders.render(), but before rendering can start, the web page has to be loaded completely.

JavaScript has an event for this: window.onload. Inside this event you can add your code. You have to do the following:

window.onload=function(){
  RUZEE.Borders.render();
};

That's it! You'll now see a nice round border with a drop shadow on your site. Try it (and again have a look at the source code)!

As has been mentioned in "Step 1", it is very important that you add some padding to the elements you want to round. This is because RUZEE.Borders draw themselves "into" the padding area and hence use some of the padding. As a rule of thumb the padding should be at least "corner radius + shadow width" pixels. But add some more pixels so the text will still have some spacing to the border, even when rounded.

[tags]ruzee, round corners, drop shadow, tutorial, css, javascript[/tags]

This is great

I've been looking for a simpler way to create rounded corners with drop shadow and this is the best way to accomplish such a task. Big ups

I feel Iike I have been taking crazy pills

There is no way that this code works. The JS files do not exist.

CSS Rounded Corners With Shadows

Great tutorial Steffen, can't wait to try it out over the weekend. I love your navigation boxes on the right of this page nice look and feel - makes your site stand out from the norm.

Cheers
Phill

That is aweseome. I stumbled upon this

That is aweseome. I stumbled upon this recently and got it to work in no time what so ever. this is something that would be a huge benefit to the drupal community.. put together a module. If not let some one else do it.

Nice effect - is there something that

Nice effect - is there something that prevents elements inside the shadow box being clicked
? I'm trying to apply these styles to a little popup div that has a tiny close button on top right, and the close doesn't work. (the close button is really an image with an 'onclick' method)

if the close button is in the middle of the box, it works, so i'm guessing it is the positioning of the close box at the top right that causes the issue, but i can't quite figure it out...

WOW! This is lovely! These are BY FAR,

WOW! This is lovely!
These are BY FAR, the nicest rounded corners I have seen yet.
Thank you for your work on this, Steffen.
It's just too bad the viewer can see the corners for half a second before they are redrawn :(
That's the same problem with nifty cubes as well.

Hi Steffen, This is really great and

Hi Steffen,
This is really great and simple to understand. I have been trying to shadow the borders of our site, but could'nt do it. Now after reading this article I feel I can do it now. I will give it a try as shown in the article.
Regards,
3DCADResources.com

[...] RUZEE.Borders (here)

[...] RUZEE.Borders (here) [...]

This's variant don't work with images

This's variant don't work with images on background? Why?

It works fine now, it didn't work with

It works fine now, it didn't work with bodyOnLoad.
Very nice

thanks

This is great! Are there any answers to

This is great! Are there any answers to compatibility issues in ie 5 for mac? The shadows don't show up correctly. It looks great though....

This is so cool! I got it to work in

This is so cool! I got it to work in no time. Thanks for sharing this!

Hello This won't work with me can

Hello This won't work with me can somebody help me with what i'm doing wrong?
see code below

Untitled Document

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

content_right

content

Looks great; THANKS!! I have a few

Looks great; THANKS!!
I have a few suggestions/complaints/requests (feel free to ignore, but ...):

1. I need some docs! For example, can I round borders on only the top (or bottom)
of an element?

2. I'd rather see only a single global name; for the most part, you do this (RUZEE);
but there are a few stray functions (rzCC, rzGetStyle, etc.); couldn't these be
properties of the RUZEE object?

3. Adding a method to a native object (Math.sqr) feels unfair. It's just as well to
define the sqr method as a property of the RUZEE object, and then there's no
pollution of anybody else's namespace.

confused about step 2. Where should

confused about step 2.
Where should add those codes?

thanks,
Kevin

My IE install is just the

My IE install is just the out-of-the-box one; no extensions of any kind. I don't normally use IE, but use FireFox and Opera in stead. There's something strange in general with images on any webpage in IE on that particular notebook (Dell Inspiron): they look very pixelated. So I suspect it's not something specific in your script. Anyway, your borders look great on every other browser/PC I tried.

Your screenshot looks extremely

Your screenshot looks extremely strange. It seems that your IE scales the pixels. It's not just the gaps that worry me, it's the whole rendering of the border. Do you have something like a "magnifying glass" IE extension installed? I know that Opera can do this, but my tests with Opera were ok...

PS, here's a screen shot for the gap

PS, here's a screen shot for the gap issue, using your own demo page. I'm on IE 6.0, windows XP SP2.

Great script. I applied it to a web

Great script. I applied it to a web site I maintain and did also notice a horizontal gap in IE as mentioned in the first post. See the box in the middle of the page of http://www.ledomedesprit.com/. The gap is just below the top corners of the box.

@David: Percentage heights are not

@David: Percentage heights are not possible. RUZEE.Borders have to add/subtract some pixels from the height you specify and adding/subtracting pixels from percentages is ... well .. kind of hard ;-) If you need "fluid, identical heights", check out my posting on that issue.

Hi, I've got a problem with the

Hi,

I've got a problem with the heigth parameter is there any way to use % instead of pix, my table/cell is first loaded at a certain size (the content of this table is small), then the user in a left menu select something to update the content of this table/cell, this content is longer than the previous one, but it doesn't change the size of my table/cell it just add a scroll bar ?

Thanks

David

Do you have a screenshot for this? Its

Do you have a screenshot for this? Its an unknown problem to me...

IE has a horizonal gap. How do I

IE has a horizonal gap. How do I eliminate this?