Return to Snippet

Revision: 4969
at February 1, 2008 10:12 by Malte


Updated Code
<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>

Revision: 4968
at January 31, 2008 10:56 by Malte


Initial Code
<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>

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

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

Resize browserside fontsize for the testpage (see URL).

Initial Title
Advanced CSS ROUNDED CORNERS

Initial Tags
css

Initial Language
CSS