Закругленные уголки с помощью VML и CSS3

Наткнулся на очень интересный вариант решения очень популярной проблемы многих веб-мастеров — закругление блоков.
Для этого варианта закругления используются VML и CSS3.

Решение без картинок, работает во всех Internet Explorer’ах включая 5ый, в Firefox, в Safari, но к сожалению в старых версиях Opera не работает.

VML(англ. Vector Markup Language — язык векторной разметки) разработан фирмой Microsoft для описания векторной графики. ©wikipedia

Не буду тянуть и сразу покажу Вам css код:

v\:roundrect {
     color:#FFF;
     display:block;
     background-color:#000;
     padding:20px;
     height:100%;
     /* Для закругления уголков в остальных браузерах */
     -moz-border-radius:10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     }

/* Для ie */
v\:roundrect  {
     behavior:url(#default#VML);
     /background-color:transparent;
     }

Наверно вы уже поняли, этот css код для закругления уголков в IE использует VML, а для остальных браузеров использует CSS3.

Теперь код самих блоков:

<!-- Подключаем VML  -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />

<v:roundrect arcsize=".04" fillcolor="#000">
Привет, я закругленный блок!
</v:roundrect>

Поясню этот код. Первая строчка подключает VML. Параметр блока arcsize отвечает за радиус закругления, fillcolor отвечает за фон блока.

Не буду утверждать, что этот способ наиболее правильный, но он тоже интересен и имеет право на жизнь.

Посмотреть демо
Прочитать статью со всем нюансами

Подписаться на заметки Чернева.