How to give shadow to a div using css

Here is a simple example which tell you how to give shadow to a div...

Example:
HTML:
<div class="box-outer">
<div class="box-inner">
text

</div>
</div>

CSS:
.box-inner {
position:relative;
top:-3px;
left:-3px;
height:150px;
background:#aa0000;
}
.box-outer {
width:150px;
height:150px;
background:#333;
}

The result will show you a red box with black shadow as shown in the image. When you increase the width of the box-outer, automatically the width of the box-inner will be increased.



Hope this example will help you...

Read more...