How to create box shadow with CSS?

With CSS3 box-shadow property, you can easily create rounded border without using a designed image created by any graphics software like Photoshop. This property is supported by IE9+, Firefox 4, Chrome, Safari 5+, and Opera. For Safari a prefix -webkit-  (-webkit-box-shadow) is needed. For Firefox 3.6 or earlier you need to use the  -moz-box-shadow property. The default value of box-shadow property is none.  The box-shadow property can add one or more drop shadow for the box. The property has a list of shadow separated by comma; each has 2-4 length value. There has an optional color and an optional inset value. The format is –

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow is a required value used to horizontal shadow.

v-shadow is a required value used to vertical shadow.

blur is optional used to blur distance.

spread is optional used to blur distance.

color is optional used to color of the shadow.

inset is optional used to Changes the shadow from an outer shadow (outset) to an inner shadow.

Example:

box-shadow:10px 10px 5px 5px pink inset;

How to create a rounded border with CSS?

With CSS3 border-radius property, you can easily create rounded border without using a designed image created by any graphics software like Photoshop. This property is supported by IE9+, Firefox 4+, Chrome, Safari 5+, and Opera. The default value of border-radius property is 0. You can define border-radius value by length or %. Length defines the shape of the corner and % defines the shape of the corner in %. You can set four border-radius properties for the four corner of an element. Such as –

border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 14px;

You can use shorthand property for these four types of radius –

border-radius: 5px 10px 15px 14px;

If the entire border radiuses are same then you can write the code like

border-radius: 5px;

For Mozillafirefox 3.4 and earlier version you have to add a prefix -moz- with border-radius properties. Such as –

-moz-border-radius: 5px;