Закругленные углы без графики при помощи CSS

В настоящее время в среде WEB-дизайна достаточно популярны закругленные углы, которые воспроизводятся различными способами. В этой статье я приведу один из примеров, лидирующий на мой взгляд, как сделать углы закругленными при помощи CSS.

CSS-код:

.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
.r1 {margin: 0 1px;}
.r2 {margin: 0 2px;}
.r3 {margin: 0 3px;}
.r4 {margin: 0 4px;}
.r5 {margin: 0 5px;}
.r6 {margin: 0 6px;}
.r7 {margin: 0 7px;}
.r8 {margin: 0 8px;}
.r9 {margin: 0 9px;}
.r10 {margin: 0 10px;}
.content, b {background-color: #CCCCCC;}
.content {padding: 10px 10px; text-align: center;}

HTML-код:

<b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b>
<div class="content">
Здесь содержимое блока
</div>
<b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>

В данном примере показаны углы с закругленностью в 10px. Но не стоит на этом останавливаться, нужно экспериментировать и изобретать новые дизайнерские решения.

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64