Многих интересует вопрос "Как сделать закругленные углы у модуля?"На самом деле вариантов достаточно много, но без знаний css реализовать это может оказаться очень непросто. Собственно данный способ заключается в том, что мы будем использовать вывод содержимого модуля, обрамленного в 3 div-a, для этого нужную нам позицию модуля будем выводить через , обратите внимание на -3 - этот стиль отображения и обеспечивает генерацию нужного нам html кода. На выходе в html у нас получается <br /> <div class="module"><br /> <div><br /> <div><br /> <div><br /> <!-- Содержимое модуля --><br /> </div><br /> </div><br /> </div><br /> </div> Именно такая конструкция и позволяет на все четыре угла "положить" картинку с уголком, при этом блок модуля будет еще и тянуться по горизонтали в случае, если у Вас резиновый шаблон.
Что нам следует сделать дальше:
в любой подходящей программе (допустим, photoshop) создать 4 уголка нужного радиуса закачать их в папку images используемого шаблона в template_css.css шаблона внести следующие стили ( в данном примере будет использован общий класс для всех модулей со стилем вывода -3, для избежания применения этих стилей на другие модули следует в настройках модуля задать какой-либо суффикс модуля или составить индивидуальный селектор и в соответствии с этим подправить приведенный ниже код ).
Код для вставки в Ваш template_css.css <br /> div.module { background:url(../images/cornet_top_left.jpg) no-repeat top left #d6d6d6; padding-top:10px; /** Данный отступ нужен для того, чтобы текст не попадал на закругление **/ }<br /> div.module div { background:url(../images/cornet_top__right.jpg) no-repeat top right; }<br /> div.module div div { background:url(../images/cornet_bottom_right.jpg) no-repeat bottom right; }<br /> div.module div div div { background:url(../images/cornet_bottom_left.jpg) no-repeat bottom left; padding-bottom:15px; /** Данный отступ нужен для того, чтобы текст не попадал на закругление **/ }
Если требуется градиентный фон, то обе картинки слева нужно сделать, допустим, шириной в 300 пикселей и нужной высоты в соответствии с градиентом, общий фон выбрать так, чтобы он позволил создать разрыв блока с модулем сразу под низом верхних картинок и стыковку с нижними. Т.е в итоге получается эффект растягивания за счет того, что левые картинки обладают большой шириной, а те, что справа просто "замыкают" их.
Вот и есть примерный метод создания закругленных уголков модулям. Хотя, конечно, многое зависит от потребностей, но любой другой метод будет не особо сильно отличаться от данного.
Источник:http://design4free.org/articles/round-border.html | 
Блог
