Закругляем рамки у блока средствами CSS

Как отобразить закруглённые уголки у блока не используя громоздкие html-конструкции на основе таблиц, либо букет из вложенных div`ов. Неужели нельзя обойтись всего одним блочным тегом убрав все описания в CSS?
Оказывается можно
Internet Explorer понимает свойства CSS behavior и expression, но не понимает псевдоэлементов CSS before и after, а другие браузеры наоборот. Комбинируя эти свойства, мы можем заставить все браузеры одинаково отображать закруглённые уголки у блока

как это выглядит:

пример html-кода:

<style type="text/css">
.corners
   {
   width: 95%;
   border: solid 1px #d1d1d1;
   background: #f0f3f6;
   color: #616c72;
   padding: 0 10px;
behavior: expression(!this.rounded ? this.rounded = this.innerHTML = '<div class="corner_before"><img src="article/c2.png" class="rights" alt="" /><img src="article/c1.png" alt="" /></div>' + this.innerHTML + '<div class="corner_after"><img src="article/c4.png" class="rights" alt="" /><img src="article/c3.png" alt="" /></div>' : '');
   }
   
.corners:before, .corner_before, .corners:after, .corner_after
   {
   display: block;
   height: 9px;
   line-height: 1px;
   font-size: 1px;
   }   

.corners:before, .corner_before
   {
   background: transparent url(article/c2.png) top right no-repeat;
   content: url(article/c1.png);
   margin: -1px -11px 0 -11px;
   }

.corners:after, .corner_after
   {
   background: transparent url(article/c4.png) bottom right no-repeat;
   content: url(article/c3.png);
   margin: 1px -11px -1px -11px;
   }

.corner_before, .corner_after
   {
   background: none;
   position: relative;
   z-index: 1;
   }

.corners img.rights { float: right; }

.corner_before img, .corner_after img
   {
   width: 9px;
   height: 9px;
   behavior: url('/png.htc');
   }
</style>

<div class="corners">
   Важнейшие составляющие юзабилити (usability) сайта - стилевое единство разделов и страниц веб сайта, удобная навигация, читабельность текстов, скорость загрузки страниц и т.д. Как правильно использовать свойства CSS и дескрипторов HTML для создания профессионального сайта читайте в разделе Веб-мастеру
</div>

За счёт того, что картинки-уголки мы сделали в виде маски, фон блока меняется только изменением значения Для этого же мы сохраняем наши уголки в формате png. Как заставить Internet Explorer версий от 5.5 до 7 правильно отображать png-формат мы подробно рассмотрели в статье PNG-прозрачность в IE