Stepped value math functions reach Baseline 2024

As of May 2024, all major browser engines support the CSS stepped value math functions: round(), mod(), and rem(). These functions transform a given value according to a separate “step value,” letting you align sizing, spacing, or other numeric CSS values to a consistent interval without JavaScript.

round(): rounding to an interval

The round() function takes a value to round, a rounding interval, and an optional rounding strategy. The output is the value rounded according to the chosen strategy to the nearest integer multiple of the interval.

A typical use case involves a CSS custom property for the value that should be rounded, or for the rounding interval itself. While hardcoding both is valid syntax, it defeats the purpose — you could just declare the final number directly. The more practical pattern looks like this:

font-size: round(var(--my-font-size), 1rem);

Here, the value of --my-font-size is rounded to the nearest multiple of 1rem. The default strategy is nearest, so the same declaration can be written explicitly as:

font-size: round(nearest,var(--my-font-size), 1rem);

The rounding strategy accepts four values:

  • up — rounds up to the nearest whole multiple of the interval (like JavaScript’s Math.ceil()).
  • down — rounds down to the nearest whole multiple (like Math.floor()).
  • nearest — rounds up or down to the closest whole multiple (the default, like Math.round()).
  • to-zero — rounds to the nearest integer multiple closer to zero (like Math.trunc()).

Remainder and modulo via rem() and mod()

The rem() and mod() functions both perform division-like operations and return the remainder, analogous to JavaScript’s remainder operator (%). Each takes two arguments: a dividend (first) and a divisor (second).

margin: rem(18px, 5px); /* returns 3px */

The distinction lies in how sign is handled. The rem() function always uses the sign of the dividend — so a positive first value always yields a positive result. The mod() function, by contrast, takes the sign of the divisor. This difference matters when working with negative values in layout calculations, where the resulting remainder can point in opposite directions.