I was wondering if there was an easier method for creating rounded edges than the one I'm using right now?

This is what I have:

------------------HTML-----------------
<div class="sidebox">
	<div class="boxhead"><h2>Test Headline</h2></div>
	<div class="boxbody">
		<p>This is a short sample paragraph.</p>
		<p>And another one.</p>
	</div>
</div>
------------------CSS-----------------
.sidebox {
	margin: 0 auto; /* center for now */
	width: 17em; /* ems so it will grow */
	background: url(sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url(sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}

Alex Konetchy
http://www.konetchreport.com

Sure. I don't really like the method you're using right now, seeing that you're using rather large images and there is a max-height. Here's something similar to what I've used before:

.container {width: 300px;}
.top {height: 10px;}
.main {}
.bottom {height: 10px;}

.right {float: right;}
.left {float: left;}

<div class="container">
<div class="top"><img src="topleft.gif" class="left" /><img src="topright.gif" class="right" /></div>
<div class="main">
Main content here
</div>
<div class="bottom"><img src="bottomleft.gif" class="left" /><img src="bottomright.gif" class="right" /></div>
</div>

Of course, it's extremely simple and very easy to modify.

- Steve

I guess I cheat - I don't bother trying to place 4 corners, I just slice off the rounded top and rounded bottom of the boxes and put them in as backgrounds on the center div.