но части моего вопроса это не отменяет - теоретически возможно делать и так, как написано выше. но практически в эксплорере это не работает.
В том то и дело, что теоретически. Единственное преимущество описаного вами способа — уголки 1-ой картинкой (1 запрос на сервер), которое вы все-равно не использовали

Если интересно, то вот конкретный пример (IE5.01-7b2, Opera 7.5+, Firefox 1.5 (1.0?), Safari):
Код:
<!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" lang="en">
<head>
****<title>Rounded corners</title>
****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
****<style type="text/css">
****/*<![CDATA[*/
*****{margin: 0; padding: 0;}
****body{margin: 80px;}
****
****div.rounded{border: 1px solid #CFCFCF;}
****div.rounded, div.tl, div.tr, div.bl, div.br{position: relative; background-repeat: no-repeat;}
****div.tl{background-image: url(img/tl.gif); background-position: 0 0; top: -1px; left: -1px;}
****div.tr{background-image: url(img/tr.gif); background-position: 100% 0; right: -2px;}
****div.bl{background-image: url(img/bl.gif); background-position: 0 100%; bottom: -2px; left: -2px;}
****div.br{background-image: url(img/br.gif); background-position: 100% 100%; right: -2px; padding: 15px;}****
****/*]]>*/
****</style>
****<!--[if IE]>
****<style type="text/css">
***** html div.tr, * html div.rounded{height: 1px;}
****
****html>body div.tl{top: -2px;}
****html>body div.bl, html>body div.br{bottom: -1px;}
****</style>
****<![endif]-->
</head>

<body>
****<div class="rounded">
 *<div class="tl">
 *****<div class="tr">
 * *<div class="bl">
 * *****<div class="br">
 * * *content
 * *****</div>
 * *</div>
 *****</div>
 *</div>
****</div>
</body>
</html>