This is probably the simplest, -a relative-positioned 'container' with 'absolute-positioned' corner images.
There are non-image methods, but this is easier and certainly more all-browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
p {font-size: 100%; line-height:1.0em; margin:16px 0 10px 0;}
html, body {min-height:100%; height:101%; padding-bottom:25px;
font:x-small Arial, Verdana, serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and under, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>
<style>
</style>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>
<div style="position:relative; width:500px; height:auto; border:1px solid silver; padding:40px 30px; margin:25px auto;" >
<h1>Level-1 Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<h2>Level-2 Header</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<img src="#" style="position:absolute; left:0; top:0; width:25px; height:25px; background-color:silver;" />
<img src="#" style="position:absolute; right:0; top:0; background-color:silver;" />
<img src="#" style="position:absolute; left:0; bottom:0; background-color:silver;" />
<img src="#" style="position:absolute; right:0; bottom:0; background-color:silver;" />
</div>
</body>
</html> Since the images are 'absolute', they can be stated at the end just before the clsoing "</div>". Additional divs also with round corners can re-use these corner image to reduce http-requests for additional images, as they will then be called from the visitor's cache.
If you do not have photo-editing software to create the required images, let me know and I'll make up a few and re-post with them. The ones I used for this example seem to have gotten seperated from the archived html file... :confused: