CSS Vertically Liquid Round Corner Box Tutorial

View Demo

This is how you make a vertically liquid round corner/bordered box with CSS and images. Or, you can do this with CSS3 and some JS.

The CSS

#box {
width:218px;
margin:50px auto;
background:url(images/midbg.jpg) 0 0 repeat-y;
-webkit-background-size:100%; /* iOS rounding error fix */
}
#box #top {
height:15px;
background:url(images/topbg.jpg) 0 0 no-repeat;
}
#box #bot {
height:20px;
background:url(images/botbg.jpg) 0 0 no-repeat;
}
#box #pad {
margin:5px 28px 12px;
}

The HTML

<div id="box">
   <div id="top"></div>
     <div id="pad">Text</div>
   <div id="bot"></div>
</div>

ADVERTISE HERE