Функция CSS `round()`

round() CSS-функция возвращает округлённое число в соответствии с выбранной стратегией округления.

Авторам следует использовать пользовательское свойство CSS (например, --my-property) для задания значения округления, интервала или обоих параметров; использование функции round() избыточно, если эти значения известны.

Синтаксис

width: round(var(--width), 50px);
width: round(up, 101px, var(--interval));
width: round(down, var(--height), var(--interval));
margin: round(to-zero, -105px, 10px);

Параметры

Функция round(<rounding-strategy>, valueToRound, roundingInterval) задаёт необязательную стратегию округления, округляемое значение (или математическое выражение) и интервал округления (или математическое выражение). Значение valueToRound округляется в соответствии со стратегией округления до ближайшего целого кратного roundingInterval.

<rounding-strategy>

Стратегия округления. Это может быть одно из следующих значений:

up

Округление valueToRound вверх до ближайшего целого кратного roundingInterval (если значение отрицательное, оно станет «более положительным»). Эквивалент метода JavaScript Math.ceil().

down

Округление valueToRound вниз до ближайшего целого кратного roundingInterval (если значение отрицательное, оно станет «более отрицательным»). Эквивалент метода JavaScript Math.floor().

nearest (по умолчанию)

Округление valueToRound до ближайшего целого кратного roundingInterval, которое может быть как больше, так и меньше значения. Если valueToRound находится ровно посередине между верхним и нижним значениями округления (ни одно из них не является «ближайшим»), оно округляется вверх. Эквивалент метода JavaScript Math.round().

to-zero

Округление valueToRound до ближайшего целого кратного roundingInterval в сторону нуля (положительное число уменьшится, а отрицательное станет «менее отрицательным»). Эквивалент метода JavaScript Math.trunc().

valueToRound

Округляемое значение. Это должно быть <number>, <dimension> или <percentage> либо математическое выражение, результатом которого является одно из этих значений.

roundingInterval

Интервал округления. Это <number>, <dimension> или <percentage> либо математическое выражение, результатом которого является одно из этих значений. Если valueToRound — это <number>, параметр roundingInterval можно опустить; по умолчанию он равен 1. В противном случае его отсутствие приводит к некорректному выражению.

Возвращаемое значение

Значение valueToRound, округлённое до ближайшего меньшего или большего целого кратного roundingInterval в зависимости от rounding strategy.

• Если roundingInterval равно 0, результатом будет NaN.
• Если и valueToRound, и roundingInterval равны infinite, результатом будет NaN.
• Если valueToRound бесконечно, а roundingInterval конечно, результатом будет то же infinity.
• Если valueToRound конечно, а roundingInterval бесконечно, результат зависит от стратегии округления и знака A:
  • up — если valueToRound положительно (не равно нулю), вернуть +∞. Если valueToRound равно 0⁺, вернуть 0⁺. В противном случае вернуть 0⁻.
  • down — если valueToRound отрицательно (не равно нулю), вернуть −∞. Если valueToRound равно 0⁻, вернуть 0⁻. В противном случае вернуть 0⁺.
  • nearest, to-zero — если valueToRound положительно или равно 0⁺, вернуть 0⁺. В противном случае вернуть 0⁻.
• В результате вычисления аргументов могут получиться <number>, <dimension> или <percentage>, но их типы должны совпадать, иначе функция будет некорректной; результат будет иметь тот же тип, что и аргументы.
• Если valueToRound в точности равно целому кратному roundingInterval, результат вычисления round() будет в точности равен valueToRound (с сохранением признака того, является ли valueToRound значением 0⁻ или 0⁺, если это применимо). В противном случае существуют два целых кратных roundingInterval, потенциально являющихся «ближайшими» к valueToRound: меньшее roundingInterval, которое ближе к −∞, и большее roundingInterval, которое ближе к +∞.

Формальный синтаксис

<round()> = 
  round( <rounding-strategy>?, <calc-sum>, <calc-sum> )

<rounding-strategy> = 
  nearest |
  up |
  down |
  to-zero

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

Примеры

Округление положительных значений

В этом примере показано, как работают стратегии округления функции round() для положительных значений.

В пяти расположенных ниже блоках функция round() задаёт высоту последних четырёх. В каждом случае округляемое значение находится в диапазоне от 100 px до 125 px, а значение округления во всех случаях равно 25px. Поэтому высота блоков округляется вверх до 125 px или вниз до 100 px.

HTML

В HTML определены 5 элементов div, которые CSS отображает в виде блоков. Элементы содержат текст со стратегией округления, исходным значением и ожидаемой итоговой высотой блока (в скобках).

<div class="box box-1">height: 100px</div>
<div class="box box-2">up 101px (125px)</div>
<div class="box box-3">down 122px (100px)</div>
<div class="box box-4">to-zero 120px (100px)</div>
<div class="box box-5">nearest 117px (125px)</div>

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

Ниже показан CSS, применяемый ко всем блокам. Обратите внимание, что мы задаём пользовательское свойство CSS с именем --rounding-interval, которое будем использовать в качестве интервала округления.

div.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  --rounding-interval: 25px;
}

Первый div слева не выбирается специальными правилами CSS, поэтому его высота по умолчанию составит 100px. Ниже показан CSS для div второго, третьего и четвёртого блоков: значения округляются соответственно вверх, вниз и в сторону нуля.

div.box-2 {
  height: round(up, 101px, var(--rounding-interval));
}
div.box-3 {
  height: round(down, 122px, var(--rounding-interval));
}
div.box-4 {
  height: round(to-zero, 120px, var(--rounding-interval));
}

Обратите внимание: выше мы задаём интервал округления с помощью var() и пользовательского свойства CSS --rounding-interval.

Для последнего блока стратегия округления не указана, поэтому по умолчанию используется nearest. В этом случае ближайший к 117 px интервал равен 125px, поэтому значение округляется вверх. Для сравнения здесь мы задали жёстко закодированные значения и для значения округления, и для интервала. Хотя это допустимо, обычно так не делают, поскольку нет смысла округлять число, если итоговый результат уже известен.

div.box-5 {
  height: round(117px, 25px);
}

Результат

Если браузер поддерживает функцию CSS round(), вы увидите пять столбцов с высотой, округлённой в соответствии с текстом внутри них.

Спецификации

Совместимость с браузерами

См. также

• mod()
• rem()