Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

Синтаксис функции round

round(<число> [<режим> [<кратность>]])
  • <число> — значение, которое вы хотите округлить.
  • <режим> — способ округления: nearest (по умолчанию), up, down, to-zero, to-nearest.
  • <кратность> — кратность, до которой будет происходить округление (например, 10px, 5%).

Округление до ближайшего кратного (nearest)

width: round(47px, 10px);

В этом примере значение 47px будет округлено до ближайшего кратного 10px. В данном случае получится 50px, так как 50 ближе к 47, чем 40.

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

Округление вверх (up)

width: round(47px up 10px);

Здесь значение 47px округляется вверх до ближайшего кратного 10px. Результат — 50px.

Округление вверх пригодится там, где важно избежать «сжатия» содержимого — например, для кнопок или контейнеров с текстом, где критично, чтобы размер был не меньше заданного.

Округление вниз (down)

width: round(47px down 10px);

Такое выражение даст результат 40px, так как значение округлится вниз до ближайшего кратного 10px.

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

Округление к нулю (to-zero)

left: round(-47px to-zero 10px);

Результат: -40px.

Фишка to-zero в том, что значение будет округлено по направлению к нулю. Если число положительное — вниз, если отрицательное — вверх по модулю. Этот режим особенно полезен для позиционирования: например, чтобы сдвигать элементы только на строго заданные шаги, не залезая слишком далеко в минусовые или плюсовые области.

Округление к ближайшему (to-nearest)

top: round(53px to-nearest 10px);

Здесь 53px округляется до 50px, потому что это ближайшее число, кратное 10.

Округление процентов

width: round(23% up 5%);

Результат: 25%.

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

Округление в сочетании с calc ()

width: round(calc(100% / 3) down 1px);

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

Фактически функция round() делает код чище и позволяет отказаться от костылей с JS, лишних расчётов или сложных вложенных calc(). Особенно актуально при построении гибких сеток, позиционировании элементов без дробных значений или для создания аккуратных адаптивных блоков без лишних просчетов.