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

Разметка контейнера может быть приблизительно такой:

Изображения, необходимые для контейнера, показаны на рис. Изображение top.gif размещается вверху, a bottom.gif - внизу.

Файл top.gif нужно применить к элементу заголовка, a bottom.gif - к нижней части контейнера div. Поскольку в стиле контейнера задана сплошная заливка, тело контейнера можно создать, добавив цветной фон в дескриптор div.

Содержимое не должно примыкать вплотную к границам контейнера, поэтому элементам, размещенным в контейнере div, нужно присвоить внутренние полоски.

Примеры: [1]

Рассмотренная выше методика прекрасно подходит для создания простых контейнеров со сплошным цветом и без рамок, однако с помощью фоновых изображений можно создавать и более изысканные стили, например такие, как на рис.

Используется тот же подход, однако теперь вместо цветного фона в контейнере применяется повторяющееся фоновое изображение. Нижнее изогнутое изображение применяется к последнему элементу, в данном примере - к абзацу, последнему в контейнере.

Примеры: [1]

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