CSS round() Function

CSS round() Function

The CSS round() function rounds a numeric value to a multiple of a specified interval.

It is used in CSS calculations to produce consistent sizes, spacing, positions, and other numeric values. The function supports four rounding strategies: nearest, up, down, and to-zero.

Syntax

round([<rounding-strategy>,]? <value>, <rounding-interval>)

The function accepts a value and a rounding interval. An optional rounding strategy determines how the value is rounded.

For example:

width: round(137px, 50px);
width: round(nearest, 137px, 50px);
width: round(up, 137px, 50px);
width: round(down, 137px, 50px);
width: round(to-zero, 137px, 50px);

The first declaration uses the default nearest strategy. The remaining declarations explicitly specify a rounding strategy.

The function returns a numeric value that is a multiple of the specified rounding interval.

For example:

width: round(137px, 50px);

The result is 150px because 150px is the nearest multiple of 50px to 137px.

Parameters

The round() function accepts two required parameters and one optional parameter.

For example:

width: round(down, 178px, 25px);

This rounds 178px downward to the nearest multiple of 25px, producing 175px.

The value and rounding interval must have compatible numeric types. For example, a length can be rounded using another length, while an angle can be rounded using another angle.

How It Works

The round() function identifies multiples of the rounding interval and selects one according to the specified rounding strategy.

For example:

width: round(83px, 20px);

The multiples of 20px near 83px are 80px and 100px. Since 83px is closer to 80px, the result is 80px.

Changing the value changes the result:

width: round(91px, 20px);

The result is 100px because 91px is closer to 100px than 80px.

The rounding interval controls the spacing between possible results.

For example:

width: round(83px, 10px);
width: round(83px, 25px);
width: round(83px, 50px);

These declarations produce 80px, 75px, and 100px, respectively.

The browser evaluates the function as part of the CSS value calculation. It does not modify the original value or change other CSS declarations.

Rounding Strategies

The round() function supports four rounding strategies. Each determines which multiple of the interval is selected.

nearest

The nearest strategy selects the multiple closest to the original value. It is the default when no strategy is specified.

width: round(nearest, 62px, 20px);

The result is 60px.

up

The up strategy selects the smallest multiple that is greater than or equal to the original value.

width: round(up, 62px, 20px);

The result is 80px.

down

The down strategy selects the largest multiple that is less than or equal to the original value.

width: round(down, 62px, 20px);

The result is 60px.

to-zero

The to-zero strategy selects the multiple closest to zero without passing the original value in the direction away from zero.

width: round(to-zero, 62px, 20px);

The result is 60px.

For positive values, to-zero usually produces the same result as down. For negative values, it usually produces the same result as up.

Rounding Negative Values

The round() function also accepts negative values. The rounding strategy determines whether the result moves toward positive infinity, negative infinity, or zero.

For example:

round(nearest, -37px, 10px)
round(up, -37px, 10px)
round(down, -37px, 10px)
round(to-zero, -37px, 10px)

Negative values are useful when rounding offsets, translations, and other CSS values that allow negative numbers.

For example:

.box {
  transform: translateX(round(down, -37px, 10px));
}

The element moves 40px to the left because the calculated translation is -40px.

Rounding Intervals

The rounding interval determines the multiples that can be returned by the function.

For example:

width: round(143px, 5px);
width: round(143px, 10px);
width: round(143px, 25px);
width: round(143px, 50px);

Smaller intervals provide finer control, while larger intervals produce more widely spaced results.

An interval can also be calculated using another CSS math function.

For example:

width: round(143px, calc(5px * 4));

The interval is 20px, so the resulting width is 140px.

Intervals are not limited to whole numbers. Decimal intervals can be used when finer rounding is required.

width: round(12.7px, 0.5px);

The result is 12.5px.

Value Types and Units

The round() function can operate on several CSS numeric types, including numbers, lengths, angles, times, and other compatible numeric values.

Different units within the same compatible type may also be used.

For example:

width: round(37px, 1cm);

The browser converts compatible length units before calculating the result.

Percentages require additional care because their meaning depends on the CSS property and the reference value used for percentage resolution.

For example:

width: round(37%, 10%);

This rounds the percentage to 40%, which is then resolved according to the rules of the width property.

Not all combinations of numeric types are valid. The value and interval must be compatible according to CSS math type rules.

Halfway Values

Halfway values occur when a number is exactly between two consecutive multiples of the rounding interval.

With the default nearest strategy, halfway values round toward positive infinity.

For example:

round(nearest, 25px, 10px)

The result is 30px, not 20px.

For negative values:

round(nearest, -25px, 10px)

The result is -20px, not -30px, because -20px is greater than -30px.

This behavior is important when calculations can produce values exactly halfway between two intervals.

Combining CSS Functions

The round() function can be combined with other CSS math functions to calculate and round values dynamically.

Using calc()

The calc() function can provide a calculated value for rounding.

.box {
  width: round(calc(120px + 17px), 20px);
}

The calculated value is 137px, which rounds to 140px.

Using min()

The min() function can select a smaller value before rounding.

.box {
  width: round(min(320px, 45vw), 20px);
}

The browser selects the smaller width, then rounds it to the nearest 20px interval.

Using max()

The max() function can establish a minimum calculated value before rounding.

.box {
  width: round(max(200px, 30vw), 25px);
}

The browser selects the larger value and rounds it to the nearest 25px interval.

Using clamp()

The clamp() function can constrain a value before it is rounded.

.box {
  width: round(clamp(200px, 40vw, 600px), 20px);
}

The browser first constrains the calculated width between 200px and 600px, then rounds the result to a multiple of 20px.

Rounding after a calculation can help maintain consistent increments while allowing values to respond to available space.

Example

The following example demonstrates how the four rounding strategies affect the width of an element.

HTML:

<div class="round-example nearest">nearest</div>
<div class="round-example up">up</div>
<div class="round-example down">down</div>
<div class="round-example to-zero">to-zero</div>

CSS:

.round-example {
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
  color: #fff;
  background-color: #3498db;
}
.nearest {
  width: round(nearest, 137px, 50px);
}
.up {
  width: round(up, 137px, 50px);
}
.down {
  width: round(down, 137px, 50px);
}
.to-zero {
  width: round(to-zero, 137px, 50px);
}

The nearest and up strategies produce 150px widths. The down and to-zero strategies produce 100px widths.

The Browser Result displays the calculated widths directly. The example's CSS declarations demonstrate how the same widths are produced using round().

Calculated Width Example

The round() function can be used to create widths that change in fixed increments as the viewport changes.

For example:

.responsive-box {
  width: round(down, 80vw, 50px);
  max-width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background-color: #3498db;
}

The element's width is calculated from 80% of the viewport width, then rounded downward to the nearest multiple of 50px.

If 80vw equals 437px, the rounded width is 400px.

If 80vw equals 512px, the rounded width is 500px.

This approach can help create layouts that resize in predictable increments instead of changing continuously with every pixel of viewport width.

The max-width declaration prevents the element from exceeding its containing block's available width.

Common Uses

The round() function is useful when CSS calculations should produce values aligned to specific intervals.

• Consistent spacing: Round calculated margins, padding, or gaps to regular increments.
• Responsive sizing: Adjust element widths or heights in fixed steps as the viewport changes.
• Grid alignment: Align calculated dimensions to a spacing system.
• Positioning: Round offsets or translations to predictable values.
• Typography: Round calculated font sizes or line heights to selected increments.
• Animations: Use rounded numeric values in supported animation calculations.
• Custom properties: Combine the function with CSS variables to create reusable calculations.

For example, a custom property can define a shared spacing interval:

:root {
  --spacing-step: 8px;
}
.card {
  padding: round(19px, var(--spacing-step));
  margin-bottom: round(27px, var(--spacing-step));
}

The padding becomes 16px and the bottom margin becomes 24px.

Using a shared interval helps keep calculated values consistent throughout a design.

Limitations

The round() function has several requirements and limitations.

• The function requires a value and a rounding interval.
• The rounding strategy is optional, but must be one of the four supported keywords when specified.
• The value and interval must have compatible CSS numeric types.
• Rounding can produce a result larger or smaller than the original value.
• Negative values may produce different results depending on the rounding strategy.
• The default nearest strategy rounds halfway values toward positive infinity.
• Zero intervals and non-finite calculations require special handling under CSS math rules.
• The rounded result must still be valid for the CSS property receiving it.
• Browser support should be checked when the function is used in production stylesheets.

For example, this is valid:

width: round(137px, 20px);

The result is 140px.

The following is also valid:

width: round(up, 137px, 20px);

The result is 140px because the up strategy rounds toward positive infinity.

The following is invalid because the rounding interval is missing:

width: round(137px);

The following is invalid because the strategy keyword is not supported:

width: round(ceiling, 137px, 20px);

The following is invalid because the numeric types are incompatible:

width: round(137px, 10deg);

A zero rounding interval is not a normal rounding step. It produces a non-finite mathematical result, which may make the declaration unusable depending on the property and calculation.

For reliable results, use a nonzero interval with compatible units and a valid rounding strategy.

Browser Support

The CSS round() function is supported in current versions of major browsers, including Chrome, Edge, Firefox, and Safari. Older browser versions may not recognize the function.

When compatibility with older browsers is required, provide a fallback declaration before the declaration using round().

For example:

.box {
  width: 140px;
  width: round(137px, 20px);
}

Browsers that support round() use the calculated value. Browsers that do not support the function can retain the earlier fixed width.

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

Specifications

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

The specification defines the rounding strategies, accepted numeric types, calculation rules, and behavior of the function.

Related CSS math functions include abs(), calc(), clamp(), min(), max(), mod(), and rem().