<style type="text/css">
div.box { overflow:hidden} /* IE font-size fix */
/* MIDDLE */
	div.box.body div.box.right {
		background-image:url(m_r.png); background-position: right; background-repeat: repeat-y;
	}
	div.box.body div.box.left {
		background-image:url(m_l.png); background-position: left; background-repeat: repeat-y;
	}
	div.box.body div.box.center {
		background-image:url(m_c.png); margin-left: 12px; margin-right: 12px;
	}

/* TOP */
	div.box.head div.box.right {
		background-image:url(t_r.png); background-position: top right; background-repeat: no-repeat; height:12px;
	}
	div.box.head div.box.left {
		background-image:url(t_l.png); background-position: top left; background-repeat: no-repeat; height:12px;
	}
	div.box.head div.box.center {
		background-image:url(t_c.png); height:12px;  margin-left: 12px; margin-right: 12px; 
	}
	
/* BOTTOM */
	div.box.foot div.box.right {
		background-image:url(b_r.png); background-position: right bottom; background-repeat: no-repeat; height:12px;
	}
	div.box.foot div.box.left {
		background-image:url(b_l.png); background-position: left bottom; background-repeat: no-repeat; height:12px;
	}
	div.box.foot div.box.center {
		background-image:url(b_c.png); margin-left: 12px; margin-right: 12px; height:12px; 
	}

</style>


<div class="box head">
    <div class="box right">
    <div class="box left">
    <div class="box center"></div>
    </div>
    </div>
</div>

<div class="box body">
    <div class="box right">
    <div class="box left">
    <div class="box center">TEXT</div>
    </div>
    </div>
</div>

<div class="box foot">
    <div class="box right">
    <div class="box left">
    <div class="box center"></div>
    </div>
    </div>
</div>

<style type="text/css">
/* MIDDLE */
	div.box.body div.box.right {
		background-image:url(m_r.png); background-position: right; background-repeat: repeat-y;
	}
	div.box.body div.box.left {
		background-image:url(m_l.png); background-position: left; background-repeat: repeat-y;
	}
	div.box.body div.box.center {
		background-image:url(m_c.png); margin-left: 12px; margin-right: 12px;
	}

/* TOP */
	div.box.head div.box.right {
		background-image:url(t_r.png); background-position: top right; background-repeat: no-repeat; height:12px;
	}
	div.box.head div.box.left {
		background-image:url(t_l.png); background-position: top left; background-repeat: no-repeat; height:12px;
	}
	div.box.head div.box.center {
		background-image:url(t_c.png); height:12px;  margin-left: 12px; margin-right: 12px; 
	}
	
/* BOTTOM */
	div.box.foot div.box.right {
		background-image:url(b_r.png); background-position: right bottom; background-repeat: no-repeat; height:12px;
	}
	div.box.foot div.box.left {
		background-image:url(b_l.png); background-position: left bottom; background-repeat: no-repeat; height:12px;
	}
	div.box.foot div.box.center {
		background-image:url(b_c.png); margin-left: 12px; margin-right: 12px; height:12px; 
	}

</style>


<div class="box head">
    <div class="box right">
    <div class="box left">
    <div class="box center"></div>
    </div>
    </div>
</div>

<div class="box body">
    <div class="box right">
    <div class="box left">
    <div class="box center">TEXT</div>
    </div>
    </div>
</div>

<div class="box foot">
    <div class="box right">
    <div class="box left">
    <div class="box center"></div>
    </div>
    </div>
</div>

http://demo.mediaraum.com/snippets/corner.html

Full reziseable Boxmodel, nice for effectfull glow or shadow PNGs.

Resize browserside fontsize for the testpage (see URL).

Advanced CSS ROUNDED CORNERS

css

CSS