<div class="wrap silver "> <h1>Sample Box</h1> <img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra. </p> <br /> <a href="http://www.designshock.com/"> DesignShock.com </a> </div>
* { padding: 0; margin: 0; } body{ background: #c0c0c0; font-size: 11px; font-family: 'Open Sans', sans-serif; color: #4A4A4A ; text-align: center; } .wrap { margin: 20px auto; display: block; width: 300px; height: 310px; padding:10px; /* general */ border: 1px solid; /* curved corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* standard version at last */ /* drop shadows. */ -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.45), 0px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.45), 0px 1px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px rgba(0,0,0,0.45), 0px 1px 2px rgba(0,0,0,0.2); /* standard version at last */ } /* ---------------------------------------------- -- SILVER BORDER ---------------------------------------------- */ .silver { /* general */ border-color: #fff; /* background color (for non css3 browsers) and gradient */ background-color: #dfdfdf; background: -moz-linear-gradient(top, #fff, #dfdfdf 50%, #cecece ); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #dfdfdf), to(#cecece) ); /* linear gradient for IE 5.5+ */ filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#FFFFFF', EndColorStr='#CECECE'); } .wrap img { width: 100%; margin-top: 15px; } p{ margin-top: 15px; text-align: justify; } h1{ font-size: 20px; font-weight: bold; margin-top: 5px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } a{ text-decoration: none; color: #4A4A4A !important; } a:hover{ text-decoration: underline; color: #6B6B6B !important ; }