Исправляем отрисовку border-radius

Проблема

В браузерах, отличных от Firefox, существуют проблемы в отрисовке блоков с border-radius.

  1. Если блоку заданы одновременно фон и рамка, то снаружи закруглённых углов виден призрачный однопиксельный ореол фонового цвета. Особенно заметно это в случаях, когда цвета фона блока, его рамки и фона родительского блока сильно различаются. До недавних пор это проявлялось в Chrome, Opera и IE9, сейчас — в Opera (11.5) и IE9:

  2. Если рамка имеет разные цвета для разных сторон блока, то в Chrome 13 и IE9 на стыке разных частей рамки также видна однопиксельная линия фонового цвета:

  3. В Chrome 13 при больших толщине рамки и радиусе закругления внутренний периметр закруглённой рамки отрисовывается грубой, почти ломаной линией:

CSS-код, иллюстрирующий проблему:

.buggy {
    background: #fff;
    border: 70px solid #000;
    border-radius: 100px;
    height: 60px;
}

Решение

Эти проблемы можно обойти, заменив блок на два, вложенных друг в друга, задав нужный фоновый цвет в качестве фона внутреннего блока, цвет рамки — в качестве фона внешнего блока, и задав для внешнего блока внутренний отступ (padding), равный нужной толщине рамки.

HTML:
<div class="ok"><div>…</div></div>
CSS:
.ok {
    background: #000; /* Цвет рамки */
    border-radius: 100px;
    padding: 70px; /* Толщина рамки */
}

.ok > DIV {
    background: #fff; /* Цвет фона */
    border-radius: 30px; /* Радиус закругления внешнего блока минус толщина рамки */
    height: 60px; /* Для наглядности */
}

Если по дизайну рамка должна иметь разные цвета для разных сторон блока, то вместо padding для внешнего блока можно задать непосредственно рамку. При этом возможный зазор между внутренним блоком и рамкой внешнего блока можно замаскировать, частично надвинув внутренний блок на рамку внешнего при помощи отрицательного поля (margin) в 1-2 пиксела с параллельным увеличением толщины рамки (border-width) внешнего блока на эту же величину с целью компенсации сдвига.

Демо-страница

См. также авторский генератор border-radius со встроенной возможностью обойти описанные нюансы рендеринга скруглённых углов.