Rounded corner and gradient colored box using css only.

Yes, now you need not to design rounded corner boxes in Photoshop or fireworks, this can be done using little bit of css only.

You’ll get code detail for

1. Rounded box using div tag and css.
2. 2. Gradient color div.
d Css style:


body {
width: 500px;
margin: 60px auto 0;
background: #0099FF;
}
#mainBox {
/* Just a box */
width: 500px;
height: 500px;

/* specify radius of rounded corner and its border size */
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 15px;
border: 2px solid white;

/* specify the multiple border colors for box */
-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;

/* Compensate for Webkit. Not as nice, but works. */
-webkit-box-shadow: 0 -1px 2px #292929;

/* Background subtle gradient, with fallback to solid color */
background: #e3e3e3;
background: -moz-linear-gradient(top, #782725, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#782725), to(#FFFFFF));
}