Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне. Есть множество вариантов их реализации часто, заключающихся в размещении изображений по углам контейнера, в худших случаях используются теги img, в лучших свойство background, для некоторых браузеров есть специфические решения, например -moz-border-radius для FireFox, но их полезность сомнительна. Простой и удобный способ скругления уголков без использования изображений или малораспространенных свойств был бы очень полезен.

У закругленных уголков выполненных с помощью изображений есть несколько недостатков:

  • несемантические элементы при верстке,
  • дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета и размера (в лучшем случае уголки группируются по 4 в одном изображении),
  • не лучший вид страницы, если у пользователя отключена загрузка изображений (особенно если используются img, а не свойство background).

Так и преимущества:

  • можно закруглять, что угодно и как угодно.

Но во многих случаях, можно избежать использования изображений. Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован, для его работы требуется только HTML и CSS.

Техника закругления уголков без использования изображений

Для начала, нужно определиться с помощью какого тега будем делать скругляющие блоки. В оригинале используется устаревший тег b, вероятно выбор пал на него по причине краткости написания, имеющей для нас большое значение, так как его придется часто повторять.

Разметка будет достаточно простой:

<div id="rounded-box-3">
    <b class="r3"></b><b class="r1"></b><b class="r1"></b>
    <div class="inner-box">
        <h3>Элемент с закругленными углами R=3px</h3>
        <p>Этот способ закругления углов подсмотрен на GMail.</p>
    </div>
    <b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div>

Дальше все просто, делаем b блочным элементом высотой 1px и задаем ему соответствующие поля.

.r1, .r2, .r3 {
    display: block;
    height: 1px;
}

.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

Затем указываем цвет фона и отступы

#rounded-box-3 .inner-box, #rounded-box-3  b {
    background-color: #CCCCCC;
}

.inner-box {
    padding:1em;
}

Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение. Пустые блоки, для которых задана высота 1px, растягиваются до 2px, что не способствует закруглению уголков, решить проблему можно указав overflow:hidden

Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7, по совету читателя tapazukk, добавим правило font-size:1px

.r1, .r2, .r3 {
    overflow: hidden; 
    font-size:1px;
}

Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.

На этом теоретическую часть можно закончить и перейти к примерам:

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

Более сложный пример закругления уголков без использования изображений
реальный пример использования техники.

Внимательный разбор кода примеров поможет понять особенности работы этого метода.

Преимущества метода:

  • кроссбраузерность (тестировался в IE6, IE7, Opera 9, FireFox 2)
  • никаких дополнительных запросов
  • просто реализуется и проще поддержка, чем при работе с изображениями (например, можно поменять цвет блока, изменив только одно значение в CSS, правда это работает и с уголками в виде полупрозрачных изображений).

Недостатки:

  • невозможность создания сложных эффектов,
  • несемантические элементы при верстке.

Можно пойти дальше и создать на PHP (Ruby, Perl или любом другом языке, которому вы отдаете предпочтение) функцию которая будет генерировать код для уголков, на основе заданного радиуса закругления, что должно упростить шаблоны и поддержку.