Круглые уголки

Сейчас стало модно делать закруглённые уголки у плашек на сайтах.

Кто-то делает это методом подкладывания жёсткой картинки под содержимое. Минусы: содержимое не тянется и не масштабируется.

Другие делают это с помощью таблиц и вложенных картинок или, более продвинутые, с помощью дивов и вложенных картинок. Минусы: большой объём HTML-кода и наличие в нём «мусора», в нашем случае — неинформативных картинок, которые ещё и подсвечиваются при выделении (попробуйте на Хабре нажать Ctrl+A).

Недавно мой бывший коллега Владимир Токмаков (технолог студии Лебедева) предложил ещё один вариант, у которого есть свои преимущества (составной фон с альфа-каналом, чистота HTML-кода) и недостатки (ограничение по размеру, громоздкий CSS).

Я же, руководствуясь соображениями чистоты кода и экономией ресурсов, решил разработать свой вариант. В процессе реализации возникла интересная проблема с браузером Internet Explorer: заключалась она в том, что при нечётной ширине контейнера (например, 301 пиксель) уголки, находящиеся справа, отступали от края контейнера на 1 пиксель.

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

Подробное описание с примерами: http://www.permlug.org/data/trash/round/
В приведённом примере суммарный вес картинок с уголками составляет 752 байта, CSS-кода — 1020 байт, HTML-кода — 198 байт.