Сглаженные закругленные углы без использования изображений

Делаю на заказ небольшую gallery заказчик шарит в теме и хочет web 2.0. По сему стал вопрос о круглых краях в блоках. Я как-то где-то наблюдал как делаю скугления div`ами и решил посмотреть что же дает эта технология.

Вот что выяснилось. Во-первых есть небольшая куча библиотек на JS которые только и занимаются скруглением. Но исользовать здоровые и непонятно как написанные библиотеки нехотелось.  Хотя нашел микрофреймворк который справляется с этой задачей на 5+. Nifty Corners 

Теперь о способе который выбрал я для своих нужд (но в последствии я его отбросил ввиду гемморойности внедрения). Он довольно простой и не отнимает много времени у браузера. Прошу считать это лишь как тренировка CSS навыков.

Это у нас стили.
block {width: 500px;margin: 30px auto 15px;}
.v1, .v2, .v3, .v4, .v5 {
 height: 1px;
 font-size: 1px;
 display: block;
 overflow: hidden;
 border: 1px solid #B8C3C8;
 border-width: 0 1px;}
.v1 {margin: 0 5px; background: #B8C3C8;}
.v2 {margin: 0 3px; border-width: 0 2px;}
.v3 {margin: 0 2px;}
.v4 {margin: 0 1px;}
.v5 {margin: 0 1px;}


Это HTML
<div id="v2">
  <b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
  <div class="text">
<h1>2. Простое закругление углов с помощью CSS</h1>
Здесь каждый угол состоит из пяти расположенных специальным образом пикселей.
</div>
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>
Вот вроде и все. Кстати это пример с сайта Свобода слова вебмастерского

Так-же советую псмотреть этот пример. Там достаточно хорошо все оптимизированно и есть градиенты (заливки) со скругленными углами. Тут.

UPDATE: -moz-border-radius и -webkit-border-radius это специфические свойтва браузера, которые эмулируют свойтво border-radius в CSS3. В Google Chrome, FF3 и Safari 3.1 уже работает border-radius. Полный список:
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

а для закругления отдельных углов подойдет следующее


-khtml-border-radius-bottomleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;


• Это стоит всего 200$, торопитесь! (2)
• Убрать рекламу в ЖЖ (11)
• Мощный PNGfix (4)
• Иконки (0)
• Голый день (0)