Although the CSS specifications make it easy to create inset and outset borders (see border-style), we may want to set up "manually" a border around an object giving a 3D effect just thanks to a right setting of the colors of each side of the border.

Generally, a 3D effect to a square object can be obtained applying an X colour for the background, then an X+1 (brighter) colour for the top and left sides and an X-1 (darker) colour for the bottom and right sides.

Let’s begin with an example. We’ll just create a paragraph with the following style (hover the mouse to get a description of each row):

width: 60px;
padding: 2px;
color: #FFFFFF;
background-color: #888888;
border: 2px solid;
border-color: #AAAAAA;

For those of you who never used colours in HTML or CSS, colours are just defined as #RRGGBB, where RR, GG and BB stand for the hexadecimal code of the quantity of Red, Green and Blue that define the colour. The hexadecimal value may go from 00 (=0) to FF (=255), hence: #000000 is black, #FF0000 is red, #00FF00 is green, #0000FF is blue, and #FFFFFF is white. Of course, as each colour can assume 255 hues, we may choose among 16 million colours (255*255*255).

Anyway: here it is the result.

Hello.

As you probably already know, border-color is a shorthand for border-*-color where * can be top, right, bottom or left. This means that this attribute may define either just one colour (that would set the four sides of the border with the same colour) or it may define up to four colours, one for each side.

Now we have a gray background and a border with a brighter gray (+2). Let’s try to define the colours of the four sides, keeping the original border colour for the top and left sides, and setting a darker (-2) one for the bottom and right sides.

border-color: #AAAAAA #666666 #666666 #AAAAAA;

The box comes like this:

Hello.

It seems that it is raising from the screen. To inverse the result, just invert the colours!

border-color: #666666 #AAAAAA #AAAAAA #666666;

Hello.

Also you may want to raise it more. There are two things you can do in order to reach this result. The first one is to increase the width of the border:

border: 3px solid;

Hello.

The other way is to make the contrast higher using more "distant" colours:

border-color: #DDDDDD #333333 #333333 #DDDDDD;

Hello.

Of course, this becomes extremely interesting when using DHTML features (that, however, we won’t discuss here). A good thing to do is, for example, to define two classes, eg. Class1 and Class2, that can be alternated by Javascript using onMouseOver and onMouseOut events. Class1 may contain, for instnace, definitions for an inset border and Class2 for an outset variant, or two different sets of colours.