HTML: блок с закругленными краями

Вот искала решение данной проблемы и нашла, на мой взгляд оптимальный вариант. Источник: http://help-html-css.narod.ru/divround.html
HTML
<div class="raised">
<b class="b1">&nbsp;</b><b class="b2">&nbsp;</b><b class="b3">&nbsp;</b><b class="b4">&nbsp;</b>
<div class="boxcontent">
<h1>Нефрит</h1>
<p>
Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых.
</p>
</div>
<b class="b4b">&nbsp;</b><b class="b3b">&nbsp;</b><b class="b2b">&nbsp;</b><b class="b1b">&nbsp;</b>
</div>
CSS 
.raised { background:transparent; width:60%; } .raised h1, .raised p { margin:0 10px; } .raised h1 { font-size:2em; color:#fff; } .raised p { padding-bottom:0.5em; } .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b { display:block; overflow:hidden; font-size:1px; } .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b { height:1px; } .raised .b2 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee; } .raised .b3 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd; } .raised .b4 { background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa; } .raised .b4b { background:#ccc; border-left:1px solid #eee; border-right:1px solid #999; } .raised .b3b { background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999; } .raised .b2b { background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999; } .raised .b1 { margin:0 5px; background:#fff; } .raised .b2, .raised .b2b { margin:0 3px; border-width:0 2px; } .raised .b3, .raised .b3b { margin:0 2px; } .raised .b4, .raised .b4b { height:2px; margin:0 1px; } .raised .b1b { margin:0 5px; background:#999; } .raised .boxcontent { display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999; }