html и css скругление углов блока div

Этот метод скругления является слегка костыльным и нестандартным, но он работает практически во всех веб браухерах чем подобное свойство в css border-radius. Бывает пригождается в определенных случаях, когда нужно сделать скругление углов чтобы не влияло на функционал и без картинок, но чтобы поддерживалось во всех старых и современных браузерах к примеру ослик IE5.5 IE6 IE7 IE8 IE9 IE10 IE11. А также поддерживало мобильные веб-браузеры без которых на сегодняшний день не малый спрос.


<style type="text/css">
	.v1, .v2, .v3, .v4, .v5 {
		height: 1px;
		font-size: 1px;
		display: block;
		overflow: hidden;
		border-width: 0 1px;
	}
	.v1 {margin: 0 5px; background:#CCC;}
	.v2 {margin: 0 4px; background:#CCC;}
	.v3 {margin: 0 3px; background:#CCC;}
	.v4 {margin: 0 2px; background:#CCC;}
	.v5 {margin: 0 1px; background:#CCC;}
</style>

<b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
	пиксельное скругление углов
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>    

Логика такова, берем стандартные css свойства чтобы учесть все браузеры. Далее, что бы скруглить углы мы просто блок div делаем в 1 пиксель, добавляем по краям слева и право отступ в 1 пиксель и красим цветом. Последующие div блоки увеличиваем отступы от предыдущего на 1 пиксель. Таким образом добавляя div блоки и увеличивая отступы с каждым разом, можно сделать больше радиус что в результате получится скругление углов на css. Если поменять порядок div в обратную сторону, то получится тот же эффект только радиус будет смотреть вниз.

html пример скругления углов div блоком

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

<div style="width:200px;">
    <b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
    <div style="padding:20px; background:#CCC;">
        результат пиксельного скругление работающий во всех браузерах
    </div>
    <b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>