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

Если оставить в стороне использование графики, что в большинстве случаев приводит к тому, что макет страницы будет фиксированным по ширине, сложности ее нарезки и расфасовки полученных кусков в пустые дополнительные контейнеры, а при изменении цветовой гаммы, на любом отдельно взятом участке все операции придется повторить и не единожды, то…

И начинаются поиски более простых решений – html-код и стили.

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

Посмотрим скриншот:

Верхний блок с прямыми углами, нижний с небольшими закруглениями, на первый взгляд практически не заметными и сразу же возникает мысль, а стоит ли огород городить?

Может быть, и не стоит, но посмотрим следующий скриншот:

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

О технике создания подобного трюка писал ранее, теперь же рассмотрим все в расширенном варианте.

В общем случае потребуется три контейнера вложенных друг в друга:

<div><!-- Блок #1 -->
  <div><!-- Блок #2 -->
    <div><!-- Блок #3 -->
      ...
    </div>
  </div>
</div>

Каждый блок отвечает за прорисовку необходимых нам border’ов:

первый – вертикальные

второй – верхний

третий – нижний

На этом собственно теория и заканчивается, по линку данному выше можно ознакомится со стилями, мы же перейдем к более практичным вещам.

Скриншот горизонтального меню уже посмотрели, посмотрим html-код:

<ul>
  <li><a href="#">Home</a></li>
</ul>

Для полного счастья не хватает одного контейнера, рисуем :)

<ul>
  <li><a href="#"><b>Home</b></a></li>
</ul>

Не на много все сложнее для вертикального меню:

<ul>
  <li class="nolink"><em><em>Раздел № 1</em></em></li>
  <li><a href="#"><b>Кнопка 1</b></a></li>
</ul>

Форма поиска по сайту, куда без нее :)

Собственно статья из-за поиска и написана.

Время, от времени занимаюсь адаптацией тем WordPress под скрипты Мастера Lasto и очень часто форма поиска в графическом исполнении или без оного, никак не вписывается в то, что получается в конечном итоге, а рисовать графику это последнее дело…

Без проблем в эти милые закругления можно вставить и картинку при помощи:

background:url(...);

Без тестовой страницы не обойтись.

Плюсы данного подхода:

• Блок не имеет фиксированной ширины
• Легко можно сменить цвет окантовки блока
• При отключенной графике ничего не теряем
• Фоновая заливка или графика, размноженная по x или y в контейнере любая

Минусы:

• Толщина border’a не может быть больше 1px
• Нет возможности изменить радиус закругления
• Дополнительные контейнеры
• В меню на hover трудно получить смену цвета border’a, по крайней мере, пока у меня не получилось :)