Сразу оговорим предполагаемые условия применения. В сайтах, работающих под MODx боксы со скругленными уголками возможно применять в двух местах:

1. В постоянной части дизайна, то есть непосредственно в шаблонах страниц или в чанках, входящих в шаблоны страниц. Это, в основном, боковые колонки - как на этом сайте.

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

2. В контенте страниц.  Здесь код, в основном, формируется с помощью визуального редактора. В контенте, конечно, могут понадобиться врезки блоков, и желательно чтобы они вставлялись самым простым способом - выбором из списков стилей. Вообще идеальным было бы решение, не требующего никаких вмешательств в код. Компромиссным решением может быть вставка в текст страниц чанков, открывающих и закрывающих боксы. А вот требовать редактирования страниц в виде HTML просто недопустимо - работать могут и "секретарши".

Мы рассматриваем только варианты, работающие во всех основных браузерах - Internet Explorer, Firefox, Opera, Safary, Chrom.

А какие виды боксов нам могут реально понадобиться? На наш взгляд, вариантов не так уж много:

 1. Простой цветной бокс без рамки с любым содержимым внутри

Возможные варианты:

1.1. Бокс Семена Шторкина:

Недостатки:

 1. Требует двух строчек HTML до и после содержимого бокса (возможна замена на чанки начала и конца).

 2. Грубоватые уголки малого радиуса.

  1. Не требует Javascript.

1.2. Метод Nifty с вызовом функции наподобие

Nifty("div.white", "big");

Недостатки:

 1. При отключенном Javascript сглаживания не будет, останется только цветной квадрат.

  1. Не требует никакого дополнительного кода в HTML.

  2. Возможно применение на существующих страницах без изменения кода.

  3. Возможность управления сглаживанием и радиусом разных уголков.

  4. Возможно применение сглаживания для любых элементов.

  5. Возможно встраивание в список стилей редактора TinyMCE.

1.3. Метод Chunky Borders

 Недостатки:

 1. Требует дополнительных строчек HTML до и после содержимого бокса (возможна замена на чанки начала и конца).

 2. Довольно сложная CSS.

  1. Не требует Javascript.

  2. Примерно соответствует боксу Шторкина, но с более качественными скруглениями.

Итог по простым боксам

Из рассмотренных простых боксов более предпочтительным нам кажется Nifty, на втором месте - Chunky Borders.

 2. Простой цветной бокс с рамкой с любым содержимым внутри

2.1. Метод  Krazy Korners

 Недостатки:

 1. Требует дополнительных строчек HTML до и после содержимого бокса (возможна замена на чанки начала и конца).

 2. Довольно сложная CSS.

  1. Не требует Javascript.

  Возможны и более редкие варианты:

2.2. Метод Chunky Borders с рамкой

  Недостатки:

 1. Требует дополнительных строчек HTML до и после содержимого бокса (возможна замена на чанки начала и конца).

 2. Довольно сложная CSS.

 3. Грубоватая рамка.

  1. Не требует Javascript.

Итог по простым боксам с рамкой

Из рассмотренных боксов более предпочтительным нам кажется Krasy Korners в различных вариантах.

 3. Боксы с заголовками

3.1. Метод  Nifty с параметрами

Nifty("div.box h3","top big");
Nifty("div.box div","bottom big");

Недостатки:

 1. При отключенном Javascript сглаживания не будет.

 2. Требует дополнительных строчек HTML до и после  заголовка и после содержимого бокса (возможна замена на чанки начала и конца).

  3. Довольно сложная CSS.

Достоинства:

  1. Возможность управления сглаживанием и радиусом разных уголков.

  2. Возможно применение сглаживания для любых элементов.

3.2. Метод  Nifty с параметрами

Nifty("div.box");
Nifty("div.header","top small");
Nifty("div.content","bottom small");

Недостатки:

 1. При отключенном Javascript сглаживания не будет.

 2. Требует дополнительных строчек HTML до и после  заголовка и после содержимого бокса (возможна замена на чанки начала и конца).

 3. Довольно сложная CSS.

 4. Не очень-то красивая рамка.

Достоинства:

  1. Возможность управления сглаживанием и радиусом разных уголков.

  2. Возможно применение сглаживания для любых элементов.

3.3. Метод  Rounded corners HTML+CSS+jQuery

Недостатки:

 1. При отключенном Javascript сглаживания не будет, и требуется довольно большая библиотека JQuery.

 2. Требует дополнительных строчек HTML до и после  заголовка и после содержимого бокса (возможна замена на чанки начала и конца).

  3. Довольно сложная CSS.

Достоинства:

  1. Очень приятный внешний вид.

  2. Возможно использование градиента в заголовке.

  3. Простое управление цветами.

  4. Возможно включение в чанки HTML - тогда не потребуется и Javascript.

Основные результаты по рассмотренным методам

Для простых скругленных боксов без рамок мы выбираем способ 1.2:

Для простых скругленных боксов с рамками мы выбираем способ 2.1: 

Для скругленных боксов с заголовками  мы выбираем способ 3.3: