CSS rem() Function

CSS rem() Function

The CSS rem() function calculates the remainder left after dividing one numeric value by another.

It is useful for repeating numerical patterns, cyclic calculations, and values that depend on division. Unlike mod(), the remainder follows the sign of the dividend. The rem() function should not be confused with the CSS rem length unit used for root-relative font sizing.

Syntax

rem(dividend, divisor)

The function requires two comma-separated numeric arguments.

For example:

rem(10, 3)
rem(20, 6)
rem(-10, 3)
rem(25px, 10px)
rem(400deg, 360deg)

The first expression returns 1 because dividing 10 by 3 leaves a remainder of 1.

The function returns a value with the same numeric type as its arguments.

For example:

.box {
  margin-left: rem(25px, 10px);
}

The calculated left margin is 5px.

The arguments must have compatible numeric types, such as two numbers, two lengths, or two angles.

Parameters

The rem() function accepts two required parameters.

For example:

rem(17, 5)

The dividend is 17 and the divisor is 5.

Because 5 fits into 17 three whole times, the remainder is 2.

Both parameters can be numerical expressions:

rem(calc(10px + 7px), 5px)

This also returns 2px.

A divisor of zero does not produce a finite remainder and should be avoided.

How It Works

The rem() function calculates the remainder using division with a quotient truncated toward zero.

The mathematical relationship is:

remainder = dividend - divisor * trunc(dividend / divisor)

For example:

rem(14, 4)

Dividing 14 by 4 produces 3 whole divisions with 2 remaining.

14 - (4 * 3) = 2

The result is 2.

Another example:

rem(21, 7)

Because 21 is evenly divisible by 7, the remainder is zero.

When negative values are involved, the quotient is still truncated toward zero, which determines the sign of the remainder.

Positive Values

When both arguments are positive, rem() returns a nonnegative remainder smaller than the divisor.

For example:

width: rem(125px, 40px);

The result is 5px because 40px fits into 125px three whole times, leaving 5px.

If the dividend is smaller than the positive divisor, the dividend is returned unchanged.

For example:

rem(5, 10)

The result is 5.

Negative Values

The sign of the result follows the dividend, which is the first argument.

For example:

rem(-10, 3)

The result is -1.

Changing the divisor to a negative value does not reverse the sign of the remainder.

For example:

margin-left: rem(-25px, 10px);

This produces a left margin of -5px.

The negative result is important when calculating offsets that may extend in either direction.

For a zero remainder, the sign of zero follows the dividend under the mathematical definition.

Using Length Values

The rem() function supports compatible CSS length values.

For example:

rem(75px, 20px)

The result is 15px.

Length values can also use different compatible units:

rem(3cm, 10mm)

Since 3cm equals 30mm, the remainder is zero.

Another example:

.box {
  padding-left: rem(85px, 30px);
}

The calculated padding is 25px.

Compatible length units are converted as necessary before the remainder is calculated.

The resulting length can be used wherever the receiving CSS property permits it.

Using Angle Values

The rem() function can calculate remainders using angle values.

For example:

rem(400deg, 360deg)

The result is 40deg.

Another example:

rem(750deg, 360deg)

The result is 30deg.

Angle calculations are useful when working with rotations that exceed one complete revolution.

For example:

.box {
  rotate: rem(450deg, 360deg);
}

The calculated rotation is 90deg.

Negative angles retain a negative remainder:

rem(-450deg, 360deg)

This returns -90deg.

Use mod() instead when negative angles should wrap into a nonnegative range.

Decimal Values

The rem() function supports decimal values as well as integers.

For example:

rem(5.5, 2)

The result is 1.5.

Another example:

rem(7.25, 2.5)

The result is 2.25.

Decimal values can also be used with CSS lengths:

rem(12.5px, 4px)

The result is 0.5px.

As with other CSS mathematical calculations, floating-point precision can affect results in some cases.

For calculations requiring exact decimal equality, consider the effects of numerical precision.

rem() vs. mod()

The rem() and mod() functions both calculate a remainder-like value, but they differ when negative arguments are used.

The rem() function follows the sign of the dividend, while mod() follows the sign of the divisor.

For example:

rem(-10px, 3px)
mod(-10px, 3px)

The first expression returns -1px, while the second returns 2px.

Use rem() when the sign of the original value should be preserved.

Use mod() when values should wrap according to the divisor, such as wrapping negative angles into a positive range.

rem() vs. the rem Unit

The rem() function and the CSS rem length unit have different purposes.

For example, the mathematical function:

.box {
  width: rem(25px, 10px);
}

This calculates a width of 5px.

By comparison, the length unit:

.box {
  width: 2rem;
}

This sets the width to twice the root element's font size.

The two features share the same name but are not interchangeable.

Custom Properties

CSS custom properties can supply the values used by rem().

For example:

.box {
  --current-size: 85px;
  --interval: 30px;
  margin-left: rem(var(--current-size), var(--interval));
}

The result is 25px.

Changing either custom property updates the calculated remainder.

Another example:

.box {
  --rotation: 450deg;
  rotate: rem(var(--rotation), 360deg);
}

The calculated rotation is 90deg.

Custom properties make the calculation reusable without changing the function itself.

Example

This example uses rem() to calculate different left margins from length values.

HTML:

<div class="rem-demo">
  <div class="rem-demo-item rem-demo-one">25px ÷ 10px</div>
  <div class="rem-demo-item rem-demo-two">55px ÷ 20px</div>
  <div class="rem-demo-item rem-demo-three">85px ÷ 30px</div>
</div>

CSS:

.rem-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.rem-demo-item {
  box-sizing: border-box;
  width: 160px;
  max-width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
}
.rem-demo-item:last-child {
  margin-bottom: 0;
}
.rem-demo-one {
  margin-left: 5px;
  margin-left: rem(25px, 10px);
}
.rem-demo-two {
  margin-left: 15px;
  margin-left: rem(55px, 20px);
}
.rem-demo-three {
  margin-left: 25px;
  margin-left: rem(85px, 30px);
}

The first item has a left margin of 5px, the second has 15px, and the third has 25px.

Each margin is calculated from the remainder of its corresponding division.

The fixed margin declarations provide fallbacks for browsers that do not support rem().

Angle Example

This example demonstrates how rem() can calculate rotation angles from values larger than one complete revolution.

HTML:

<div class="rem-angle-demo">
  <div class="rem-angle-item">
    <div class="rem-angle-box rem-angle-one">450°</div>
    <p>90° Remainder</p>
  </div>
  <div class="rem-angle-item">
    <div class="rem-angle-box rem-angle-two">765°</div>
    <p>45° Remainder</p>
  </div>
  <div class="rem-angle-item">
    <div class="rem-angle-box rem-angle-three">-450°</div>
    <p>-90° Remainder</p>
  </div>
</div>

CSS:

.rem-angle-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 30px 15px;
  background-color: #f1f3f5;
}
.rem-angle-item {
  width: 130px;
  text-align: center;
}
.rem-angle-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  background-color: #0066cc;
  color: #ffffff;
  font-weight: bold;
}
.rem-angle-item p {
  margin: 0;
}
.rem-angle-one {
  rotate: 90deg;
  rotate: rem(450deg, 360deg);
}
.rem-angle-two {
  rotate: 45deg;
  rotate: rem(765deg, 360deg);
}
.rem-angle-three {
  rotate: -90deg;
  rotate: rem(-450deg, 360deg);
}

The first box rotates 90 degrees, the second rotates 45 degrees, and the third rotates -90 degrees.

The rem() function reduces each angle to its remainder after division by 360 degrees.

The fallback declarations produce the same rotations in browsers without support for the function.

Common Uses

The rem() function is useful for mathematical calculations involving repeated intervals and signed remainders.

For example:

.spacing {
  margin-left: rem(75px, 20px);
}
.rotation {
  rotate: rem(450deg, 360deg);
}
.offset {
  translate: rem(-55px, 20px) 0;
}

These expressions calculate 15px, 90deg, and -15px respectively.

The function is most useful when the remainder itself is needed rather than the result of ordinary division.

Limitations

The rem() function has several important rules and limitations.

• It requires exactly two arguments.
• The arguments must have compatible numeric types.
• The function returns a value with the same numeric type as its arguments.
• The sign of a nonzero remainder follows the dividend.
• Division by zero does not produce a finite remainder.
• Non-finite values can produce results that are invalid for the receiving property.
• Floating-point precision can affect decimal calculations.
• The function does not perform ordinary division or return the quotient.
• It is unrelated to the CSS rem length unit.
• Browser support is more limited than for established functions such as calc().

For example, this is valid:

width: rem(75px, 20px);

The following is invalid because the arguments have incompatible numeric types:

width: rem(75px, 20deg);

The following is invalid because the divisor is missing:

width: rem(75px);

For predictable results, use compatible values, avoid a zero divisor, and provide fallbacks where needed.

Browser Support

The CSS rem() mathematical function has Limited availability and is not Baseline across all major browsers.

Support for the function should not be confused with support for the widely available rem length unit.

For example:

.box {
  margin-left: 15px;
  margin-left: rem(75px, 20px);
}

Browsers supporting rem() calculate the remainder. Unsupported browsers retain the preceding valid declaration.

Feature detection can also be used:

@supports (width: rem(75px, 20px)) {
  .box {
    width: rem(75px, 20px);
  }
}

The @supports rule checks whether the browser accepts the declaration.

For current compatibility information, visit Can I Use? and search for CSS rem() math function.

Specifications

The rem() mathematical function is defined in the CSS Values and Units Module Level 4 .

The specification defines the remainder calculation, compatible numeric types, and behavior with positive and negative values.

Related CSS functions include mod(), round(), calc(), abs(), and sign().