Rather inner/outer system than piggibacking other elements.
More stabile.
Transparent corners.
Top tall, bottom short.
<div class="outer"> <div class="inner"> <h4></h4> <p></p> </div> </div>
.outer{
background:url(vertical-top-tall.png) center top no-repeat;
float:left;
margin-bottom:50px;/*compensates the margin-bottom:-50px; in .inner, it can be more if some margin is needed below that box*/
width:202px;
}
.inner{
background:url(vertical-bottom-short.png) center bottom no-repeat;
float:left;
margin-bottom:-50px;/*to adjust upper edge of bottom bg*/
padding:0;/*optional, to position the elements inside, may be whatever*/
position:relative;/*needed for ie6*/
width:202px;
}
<div class="flexiBar-outer"> <div class="flexiBar-inner"> inner, outer </div> </div>
.flexiBar-outer{
background:url(horisontal-background.gif) right center no-repeat;
float:left;
height:25px;
padding-right:10px;
width:auto;
}
.flexiBar-inner{
background:url(horisontal-background.gif) left center no-repeat;
float:left;/*keeps content from stretching page-wide under IE6 and IE7*/
line-height:25px;/*height of the construction*/
/*margin-left:-10px;
on some occasions when one end of the background gets hidden you may like to play with this,
has to cover the background's side curve*/
padding-left:10px;/*side padding, if neg margin used has to compensate this as well*/
position:relative;/*FireFox*/
white-space:nowrap;/*keeps a single line thing from breaking in to more lines*/
width:auto;/*float requires a width, and auto as this thing is fluid*/
}