Friday, 20 December 2013

CSS3 - How can we apply Multiple Borders to a Div Box

Using box-shadow we have to add multiple Borders.

Example: 
box-shadow: 3px 5px 10px 7px #EEE;


div
{
width:150px;
height:150px;
box-shadow: 3px 5px 10px 7px #000;
}
<div></div>

RESULT:



In the Above example, the 5 values represents

3px - The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
5px - The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
10px - The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
7px - The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
#000 - Shadow Background Color

No comments:

Post a Comment

Thank you so much for providing your valuable feedback. I will will look into them and update my skills & technologies accordingly.