Back to CSS Tips
Preview: what the working site looks like.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>      
    <div id="container">
    <div id="one" class="bl">
        <div class="br">
            <div class="tl">
                <div class="tr">
                      content here              
                    <!--end tr--></div>
                <!--end tl--></div>
            <!--end br--></div>
        <!--end bl--></div>
                    <div id="two" class="bl">
                        <div class="br">
                            <div class="tl">
                                <div class="tr">
                                	content here            
                                <!--end tr--></div>
                            <!--end tl--></div>
                        <!--end br--></div>
                    <!--end bl--></div>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 535px;
	margin: 0 auto;
	overflow: auto;
	background: #fff;
}
/******************************************************************/
/**********************styles corners******************************/
			.bl {
				background: url(bl.gif) 0 100% no-repeat #e68200; 
			}
			.br {
				background: url(br.gif) 100% 100% no-repeat;
			}
			.tl {
				background: url(tl.gif) 0 0 no-repeat;
			}
			.tr {	
				background: url(tr.gif) 100% 0 no-repeat; 
				padding:10px;
			}
/******************************************************************/
/**********************positions boxes*****************************/
#one {
	width: 300px;
	float: left;
	margin: 20px 0 0 20px;
}
#two {margin: 20px 20px 20px 340px;
}
		
The corner images
top right bottom right bottom left top left