Holding out hope for CSS3, which I beleive is supposed to include a method of creating 'round corner' on element use a declaration very similar to the one you suggested in first post.
In the meantime, the simplest method is to have an 'position:relative' container that has four 'position:absolute;' images, each respectively a 'corner' for the four edges. -A 'topleft', 'topright', 'bottomleft' and 'bottomright' would suffice.
Add "padding:foo:XXpx;" to the relative-positioned container whereby the value "foo:XXpx" is a number equal to or slightly greater than the height/width of the four courner images. This ensure that the content of the container is 'padded' away from the images so as to not over-write on top of them.
Here is an example:<!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> BOLD is the relative-positioned container, and red are the four absolute-positioned images.
The container must be stated "position:relative;" in order for the "position:absolute;" images to be based on it, else they will be based upon the upper-left of the viewscreen.
This is possibly the easiest, most all-browser method to attain curved corners.