Закругляем углы

Существует не мало способов создать контейнер для текста с закругленными углами. Но тот который я хочу описать понравился мне своей простотой и гибкостью.

Перед вами простой и быстрый способ создать блок с закругленными углами, не ограниченый по высоте и ширине.

Все что нам для этого нужно это 5 минут времени и четыре картинки уголков. Да, к сожалению браузеры поддерживающие свойство border-radius пока не в большинстве, а мы верстаем для людей, а не для браузеров, так что без картинок не обойтись.

Здесь мы используем принцип вложенности элементов и фоновые картинки, распределенные по углам. Соответственно нам нужно четыре вложенные друг в друга контейнера и четыре картинки уголков, по количеству углов :)

HTML:

<p>
    <span>
        <span>
            <span>
                Много текста
            </span>
        </span>
    </span>
</p>
<p id="two">
    <span>
        <span>
            <span>
                Много текста
            </span>
        </span>
</span>
</p>
<p id="three">
    <span>
        <span>
            <span>
                Много текста
            </span>
        </span>
    </span>
</p>

Тут все просто. У второго и третьего контейнера задан id для того чтобы изменить их ширину.

Теперь перейдем к стилям. В этом способе есть одно небольшое неудобство. Цвет фона страницы должен совпадать с цветом уголков. То есть если надо изменить фон страницы, то без Фотошопа не обойтись, так как придется изменять цвет уголков. Кстати вот они:

• Верхний левый
• Верхний правый
• Нижний левый
• Нижний правый

Смотрим на CSS:

body {
    background-color: #0084C7; /*Цвет должен соответствовать цвету уголков*/
}

p {
    color: black;
    background: white url("images/left_top.gif") top left no-repeat;
    margin: 0 0 20px 0;
}

p span {
    display: block; /* переводим все span'ы из лэерных элементов в блочные */
    background: url("images/right_top.gif") top right no-repeat;
}

p span span {
    background: url("images/right_bottom.gif") bottom right no-repeat;
}

p span span span {
    padding: 2em;
    min-height: 1px; /* обязательно для автоматического создания высоты */
    background: url("images/left_bottom.gif") bottom left no-repeat;
}
/*исправление для IE 6*/
    * html p span span span {
    height: 1px; /* IE6 проигнорирует это свойство и задаст высоту по контенту */
}

Уголки задаются начиная от верхнего левого угла контейнера, так же как и координаты в HTML. Думаю что из названий background-image все понятно.

Во внутреннем, третьем span‘е обязательно нужен min-height любого значения и исправление height для Интернет Эксплорера 6, который мы прописываем с помощью * html хака. Я выставил значение 1px, так как IE6 все равно его проигнорирует и растянет высоту блока до высоты контента.

Вот и все. Можно посмотреть рабочий пример, а можно скачать вместе с картинками, одним архивом.