Решение без картинок, работает во многих современных браузерах, кроме старых
версиях Opera и Firefox. 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 отвечает за фон блока.
Не буду утверждать, что этот способ наиболее правильный, но он тоже интересен и
имеет право на жизнь.
Источники: habrahabr, snook.ca |