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

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

The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.

Syntax and cascade

Overview

The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.

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

Powered by web-features