Shadow/image around div or table

Very simple question that I cannot find the answer too.  I have a table or div on a site and I want to add like a drop shadow/image around the border of that div or table.  

How can I achieve this, either through CSS or HTML.

Check this site out for a good example:
http://www.infusystem.com
LVL 30
LZ1Asked:
Who is Participating?
 
bluefezteamConnect With a Mentor Commented:
If you are using a table, this will be quicker to explain.
create a 3 by 3 table

the outer edge cells will hold your shading - the centre cell is for your content.

In photoshop(or similar) create a drop shadow effect which is 10px deep: start with a white square and apply the drop shadow effect, then you need to slice up the shadow into corners and sides. you should end up with corner pieces 10px x 10px and a side and top piece which is 10px x 1px.

With the 4 corners of the shadow you simply drop them into the corner table cells, and give the cells a height and width of 10px; for the sides and top you need to set those images as the BG image for those cells so they will repeat as the table gets longer.

Hope that makes sense.

Heres another tutorial

http://forums.digitalpoint.com/showthread.php?t=374316
0
 
bluefezteamCommented:
0
 
LZ1Author Commented:
The tutorials you provided were ok, but what about making it scalable?  I don't want to have to do it each time I create  a new web page.  
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
Devario JohnsonConnect With a Mentor Software EngineerCommented:
have a 1px X 1 px image that is your bg but have it repeat X or Y based on if it's the sides or the top / bottom....

then use images for the corners that are similar to the 1 X 1 px ones...it will create the illusion of a image all around (shadow) and it will be scalable based on any dimension.
0
 
bluefezteamCommented:
The solution is scalable - with the sides and top set as BG images, when you stretch the table in either direction, the table will grow and the BG images repeat

It will be scalable
0
 
LZ1Author Commented:
Thanks guys, I got it.  Works like a charm!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.