Advertisement
Tutorial #5: Dynamic text box with rounded corners
This is very principle CSS tutorial that shows how to build dynamic text box. The most important think is that we can change the width of the box and also the height is expandable. So we could use it everywhere in the page - for navigation, article, news etc. It's easy, fast and effective. Here is the final result:
Welcome to CoolCSS
So, first we need to create 4 images. In our case they are:
box_top_left.gif 12x36 pixels,
box_top_right.gif 933x36 pixels,
box_bottom_left.gif 12x611 pixels,
box_bottom_right.gif 933x611 pixels.
As you notice in this tutorial, the size of our images is bigger then the size of the box. And that's the key. We use only this part of every image, that we need.
.box_example {
color:#333333;
font-size:11px;
background: url(box_bottom_right.gif) no-repeat bottom right;
margin: 0; /* margin:0 auto; - for centered box */
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.box_example .header {
margin: 0;
padding: 0;
background:url(box_top_right.gif) no-repeat top right;
text-align: center;
}
.box_example .header h2{
color:#ffffff !important;
background:url(box_top_left.gif) no-repeat top left;
font-size:14px !important;
font-weight:bold !important;
padding-top: 7px !important;
height:20px;
margin: 0;
}
.box_example .text {
background:url(box_bottom_left.gif) no-repeat bottom left;
padding:10px 10px 15px 10px;
margin:0;
height:auto;
text-align:justify;
color:#003399;
line-height:15px;
}
<div class="box_example" style="width:300px;">
<div class="header"><h2>Welcome to CoolCSS</h2></div>
<div class="text">
some text
</div>
</div>
Files used in this tutorial: 
box_example.rar