Иногда стоит задача в шаблоне создать фон для модулей с закругленными углами. Как затратить минимум усилий и html-кода мы расскажем в этой статье.

Поскольку фон из некоторых частей современные браузеры (кроме Safari) не поддерживают, то такие вещи приходится делать несколькими элементами, вложенными друг в друга. Есть способ как можно избежать подобных вещей.

Имеем html-код:

<div>
Текст
</ Div>
В css задаем фон голубой:

. Incut {
background: # dff7ff;
padding: 20px;
}

Четыре угла (это изображение с округлением) навешиваем на элементы: before и: after:

. Incut: before {
content: url (top_left.gif);
background: url (top_right.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin:-20px-20px 13px-20px;
}
. Incut: after {
content: url (bottom_left.gif);
background: url (bottom_right.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin: 13px-20px-20px-20px;
}

Этот пример работает во всех современных броузерах кроме Internet Explorer (Firefox 1-2, Opera 7-9, Safari 3). Для IE аналогичный функционал навешиваем с помощью ява-скрипта, который мы разместим в самом css (лучше разместить его в отдельный файл css для Internet Explorer):

. Incut {
zoom: 1;
ehavior: expression (! this.isInserted == true? this.isInserted = (this.innerHTML = '<span style="background: url (top_right.gif) no-repeat 100% 0; height: 7px; display: block; margin:-20px-20px 13px-20px; "> <img src="/top_left.gif" alt="" /> </ span> '+ this.innerHTML +' <span style =" background: url('/bottom_right.gif ') no-repeat 100% 0; height: 7px; display: block; margin: 13px-20px-20px-20px; "> <img src="/bottom_left.gif" alt="" /> </ span> '): '');
}

Теперь наш блок будет работать и в Internet Explorer 6-7. При отключенных скриптах пользователь IE увидит голубой фон без скругленных углов, т.е. визуально ничего не сломается.