Исправляем отрисовку border-radius
- Опубликовано:
В браузерах, отличных от Firefox, существуют проблемы в отрисовке блоков с border-radius.
Если блоку заданы одновременно фон и рамка, то снаружи закруглённых углов виден призрачный однопиксельный ореол фонового цвета. Особенно заметно это в случаях, когда цвета фона блока, его рамки и фона родительского блока сильно различаются. До недавних пор это проявлялось в Chrome, Opera и IE9, сейчас — в Opera (11.5) и IE9:
Если рамка имеет разные цвета для разных сторон блока, то в Chrome 13 и IE9 на стыке разных частей рамки также видна однопиксельная линия фонового цвета:
В 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-radius со встроенной возможностью обойти описанные нюансы рендеринга скруглённых углов.