





In this session I am going to explain you how to create rounded block (will extends based on the text inside the block) with shadow using CSS like below image.

Main elements in this case would be the heading, text, bottom, shadow.
Here is the outline how to create the box.
CSS styles:
.ViewBox{
width: 465px;
background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBDUgcnzCxGJGp40a2V-UPJuw8Bj-3ZKPGhtEl7gW3HaHnX_aUKFilB4-ekIXyWVAZvfUB1OmnsNJ7nJwQO1CpG66BZrixFkTLRlUAoeQATfekQX14QuRNLvsBt_2so2IZnnakqCijs7Y/s1600/ViewHead.png) top left no-repeat;
padding-top: 10px;
}
.ViewBox .ViewHead { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7Apgm4IOZkh0UhzM3_03DHF2RA8hxY-Vsy45fXPLHtkV4FrVUzABxS5SWwwtptuu6vrIVqrajdM7-oJ_SHSy9smdDTtbARrkx1wacKvCymb0RcCTOtNxhqty_Ul0NwBehyphenhyphengfoYoHSBc/s1600/ViewHeadRepeater.png) top left repeat-y;
font:normal 24px 'Trebuchet Ms', Trebuchet, sans-serif;
color:#0D3367;
margin-left :-10px;
margin-top :-10px;
margin-bottom :10px;
padding-left: 10px;
text-transform:uppercase;}
.ViewBox .BoxContent{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqNPTCkW61V7S2K427qM-uqBAKCzKghI7yT4n929iadp6fPOaZRuZzv4tJNtIR6g8uRX3hPYaV1IcUoez67ErwUaSoU3nri5-O_SUVaDANSpA8cPNklSwZv9bhWh3mvtEsQnKjAXwvJ7I/s1600/ViewShadowRepeater.png) top right repeat-y;
padding:0 7px 0 0;
}
.ViewBox .BoxContentInside {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLH4bhpdDTcp3P98sNlll5y9_qpuethMInNUqhp6Gbzq-a1SDTFXk629ruaaaqRhYDsXY6_N-LR_qUDsCaYjIpiCnZgdRJEq8NIbojOEaKvJ-s4HGzzZKlVT1tezB_su0RVxTLOywq7Vo/s1600/ViewContentRepeater.png) repeat-x scroll;
overflow: hidden;
padding:10px 10px;
}
.ViewBox .BoxBottom{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDA-0l58xG1TAaC1YtiGFDtPKPehbtJ9ANHMguxwd-rpS1DIQR411GPpp8PKa3Xutw7RBsrw6nHi9xA-f1m3UHzdZcUKYuRivLSYQmyrOUQhMLkKZ-Z1R4GZ4J11tvBg8nRsAQdPm9r0/s1600/ViewBoxBottom.png) no-repeat;
height:31px;
}
<div class="ViewBox">
<div class="BoxContent">
<div class="BoxContentInside">
<div class="ViewHead">ESO - Mozart, Boy Genius</div>
<p>From May, 08 at 2 PM to May, 08 at 4 PM</p>
<p>
The inspiring story of young Mozart, his music, and his
life. Local performers and the musicians of the ESO bring Mozart to
life with his stories and many of his most famous classical works
including The Magic Flue, Eine kleine Nachtmusik, Don Giovanni,
Symphony No. 1 and Symphony No. 41.
</p>
</div>
</div>
<div class="BoxBottom"></div>
</div>
