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

Мне было интересно, можно ли сделать на мибб красивый край и форум переменной ширины. Недавно я изобрёл-таки велосипед. Для более или менее продвинутых в CSS, рассказываю, как это можно устроить.

Тело форума #pun_index, в котором располагаются таблички, как кощеева игла, лежит в двух оболочках: #pun-wrap и #pun. Нам понадобятся картинки для левой и правой границы, если они разные, или одна, если одинаковые.

Код:
/*-----------------------------первая оболочка---------------------------*/
#pun_wrap {
  margin: 0 auto; /*центрируем оболочку, чтобы форум располагался по центру*/
  width: 90%; /*ширина в процентах*/
  max-width: 950px; /*максимально возможная ширина, чтобы у пользователей с мониторами 1280*1024 и больше не разносило форум совсем уж неприлично*/
background: transparent url('ссылка на левый край границы') repeat-y;
}
/*--------------------------вторая оболочка-----------------------------*/
#pun {
  width: 100%; /*чтобы впритык к предыдущей оболочке*/
  background: transparent url('ссылка на правый край границы') repeat-y top right;
  padding: 0 Xpx; /*вместо Х ставите ширину своей границы в пикселях*/
}
/*----------------наконец-то, последняя оболочка, где таблицы----------*/
#pun-index {
  background: #цветфона; /*при желании можете задать фоновую текстуру*/
  padding: 0 10px; /*отступ от краёв, чтобы все элементы не приклеивались к нашим границам*/
}

Какие минусы:
— Нужно, чтобы внутренний край был ровным, иначе будет выглядеть некрасиво, если только вы не планируете создавать прозрачный или полупрозрачный фон у таблиц.
— Создать красивую границу сверху и снизу у меня пока не вышло: как их приделать я придумал, но из-за них при сужении появляется горизонтальная полоса прокрутки, что плохо.

Какие плюсы:
— Резиновость дизайна.
— Отпадание необходимости делать заведомо большой (или широкий) фон, можно сделать фоном текстуру или картинку, не меняя её, и преспокойной замостить фон.

Разумеется, вышеприведённый код просто так копировать и вставлять в свой CSS не стоит. Стоит поискать все упомянутые оболочки и посмотреть, что и как там можно исправить.

Удачных вам экспериментов, если что, задавайте вопросы, постараюсь ответить.

Автор статьи: Кельтослав
Источник: http://colorforum.ru/