Не мне вам рассказывать какая это проблема для верстальщика. Начиная от соблюдения семантики в написании HTML кода, продолжая валидностью в CSS и заканчивая подгрузкой JavaScript, все спотыкается об него — об Тот, про который не хочется не просто говорить, но, самое главное, видеть и знать, что он существует. Но начнем с самого хорошего.

Картинки против CSS

Когда можно обойтись инструкцией CSS — это самый лучший вариант. Достаточно написать border-radius: 5px и получим закругленные уголки с радиусом 5 пикселей. Но эта инструкция доступна только в браузерах поддерживающих CSS3.

Еще раньше были созданны собственные свойства у браузеров Mozilla Firefox 2 (-moz-border-radius) и Safari 3 (-webkit-border-radius) с аналогичным действием. Еще были слухи о мистическом -khtml-border-radius для Konqueror, но говорят, что это не работает. Корректно поддерживал закругленные уголки только Safari, когда как в Мозиле эти уголки выглядят ужасно — пиксельные, без сглаживания, они могли быть использованы только если цвета не слишком контрастные.

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

Опера и IE никогда и не пытались это реализовать. О них и о некрасивых уголках в FF2 и пойдет речь в этом посте.

Opera и SVG

Opera, первый и единственный браузер, в котором была реализована поддержка использования SVG в качестве фона блока. Делается это довольно просто.

В отдельный файл (например bg.svg) пишем SVG-код и сохраняем. Это обычный текстовой файл, только с раcширением svg. В CSS для нужного нам блока прописываем фон:

.block {
   background: url(bg.svg);
}

Чтобы это были именно закругленные уголки, нужно в SVG-файле написать что-то вроде такого:

<svg xmlns="http://www.w3.org/2000/svg">
<rect stroke="#000" fill="#DDD" stroke-width="4" width="100%" height="100%" rx="15" ry="15" />
</svg>

Атрибуты тэга rect меняйте как вам нужно.

В принципе, код не обязательно писать вручную, можно воспользоваться любым векторным редактором, который поддерживает экспорт в SVG.

Firefox 2

Пиксели, пиксели, пиксели… Они повсюду, они атакуют… Они напоминают времена DOS-овских игр…

Исправить можно. Опять же через SVG. Но поскольку FF2 не поддерживает SVG в качестве фона, то придется хитрить и добавить пару лишних блоков, один из которых будет являться внедренным объектом, а в другой будет помещено нужное нам содержимое. Таким образом object будет играть роль подложки.

Добавим позиционирование.

/* внешний блок */
.block {
position: relative;
}

/* объект */
.block > object {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}

В результате .content будет наложен на object.

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

IE

Много пелось диферамбов языку VML. Сколько статей о том, на сколько он лучше SVG. А в нашем случае все в основном предлагают использовать код такого плана:

Content of the block

Да, вариант не плох. Разве что писанины много. Но есть тут один очень неприятный подводный камень.

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

Оказывается неутомимые редмондовские индусы придумали динамичное решение описав его такой ремаркой:

Defines the rounded corners of a rounded rectangle as a percentage of half the smaller dimension of the length and width of a rectangle. 0% would have square corners, and 100% would form circular corners. A square with an ArcSize value of 1.0 would be a circle. The default value is 0.2 (20%).

Перевожу: Определяет закругленные углы у прямоугольника как проценты от половины меньшего размера длины или ширины прямоугольника. Т. е. берется ширина или высота (что из них меньше, то и берется), делится пополам и высчитываются проценты от этой величины.

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

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

Решение

Вставляем внутрь блока два VML-блока, выставляем высоту в два раза большую нужного нам радиуса, радиус прописывам 1, и размещаем с абсолютным позиционированием один прямоугольник наверх, другой — вниз.

Тупое, но все-таки решение.

И на сладкое

Все это замечательно, но в любом из решений, в моем или каком-нибудь другом будут проблемы с границами, сдвигами, интервалами и размерами.

Я попробовал все выровнять, но использовал очень много хакков, и проверял в браузерах FF2, FF3, Safari 3, IE 6, IE 7, Opera 9.5. Не знаю в каких условиях, но где-то обязательно даст сбой. Так что, мой материал несет учебно-ознакомительный характер, а не руководство к использованию.

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