Newly available Helpful when round(), mod(), and rem() improves stylesheet organization, fallback behavior, or cascade control.

round(), mod(), and rem()

The mod() CSS function returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.

The calculation is a - (Math.floor(a / b) * b). For example, the CSS mod(21, -4) function returns the remainder of -3. The full calculation is 21 - (Math.floor(21 / -4) * -4). When dividing 21 by -4, the result is -5.25. This is floored to -6. Multiplying -6 by -4 is 24. Subtracting this 24 from the original 21, the remainder is -3.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
mod
125
125
118
15.4
125
15.4
mixed type parameters

Mix `<percentage>` with `<length>` and `<number>` parameters
125
125
118
17.2
125
17.2
Other
css.types.rem

The rem() CSS function returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend.
125
125
118
15.4
125
15.4
CSS type
mixed type parameters

Mix `<percentage>` with `<length>` and `<number>` parameters
125
125
118
17.2
125
17.2
Other
css.types.round

The round() CSS function returns a rounded number based on a selected rounding strategy.
125
125
118
15.4
125
15.4
CSS type
mixed type parameters

Mix `<percentage>` with `<length>` and `<number>` parameters
125
125
118
17.2
125
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.grid-snap {
  /* Snap to an 8px grid */
  width: round(var(--dynamic-width), 8px);
}

.alternating {
  /* Check if the element index is even or odd */
  --is-even: mod(var(--index), 2);
}

.cycle {
  /* Loop through 5 colors */
  --color-index: mod(var(--index), 5);
}

Live demo

Round() gridsnap

round(), mod(), rem() functions Round() gridsnap demo.

PreviewFullscreen

Mod check

round, mod, rem functions Mod check demo.

PreviewFullscreen

Rem calculation

round, mod, rem functions Rem calculation demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use round(), mod(), and rem() to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links