Theround()CSSfunction returns a rounded number based on a selected rounding strategy.

Authors should use acustom CSS property (e.g.,--my-property) for the rounding value, interval, or both; using theround() function is redundant if these have known values.

Syntax

width: round(var(--width), 50px);width: round(up, 101px, var(--interval));width: round(down, var(--height), var(--interval));margin: round(to-zero, -105px, 10px);

Parameters

Theround(<rounding-strategy>, valueToRound, roundingInterval) function specifies an optional rounding strategy, a value (or mathematical expression) to be rounded and a rounding interval (or mathematical expression).ThevalueToRound is rounded according to the rounding strategy, to the nearest integer multiple ofroundingInterval.

<rounding-strategy>

The rounding strategy.This may be one of the following values:

up

RoundvalueToRound up to the nearest integer multiple ofroundingInterval (if the value is negative, it will become "more positive"). This is equivalent to the JavaScriptMath.ceil() method.

down

RoundvalueToRound down to the nearest integer multiple ofroundingInterval (if the value is negative, it will become "more negative"). This is equivalent to the JavaScriptMath.floor() method.

nearest (default)

RoundvalueToRound to the nearest integer multiple ofroundingInterval, which may be either above or below the value.If thevalueToRound is half way between the rounding targets above and below (neither is "nearest"), it will be rounded up.Equivalent to JavaScriptMath.round().

to-zero

RoundvalueToRound to the nearest integer multiple ofroundingInterval closer to/towards zero (a positive number will decrease, while a negative value will become "less negative"). This is equivalent to the JavaScriptMath.trunc() method.

valueToRound

The value to be rounded.This must be a<number>,<dimension>, or<percentage>, or a mathematical expression that resolves to one of those values.

roundingInterval

The rounding interval.This is a<number>,<dimension>, or<percentage>, or a mathematical expression that resolves to one of those values. IfvalueToRound is a<number>,roundingInterval may be omitted and defaults to1. Otherwise, omitting it results in an invalid expression.

Return value

The value ofvalueToRound, rounded to the nearest lower or higher integer multiple ofroundingInterval, depending on therounding strategy.

• IfroundingInterval is 0, the result isNaN.

• IfvalueToRound androundingInterval are bothinfinite, the result isNaN.

• IfvalueToRound is infinite butroundingInterval is finite, the result is the sameinfinity.

• IfvalueToRound is finite butroundingInterval is infinite, the result depends on the rounding strategy and the sign ofA:

  • up - IfvalueToRound is positive (not zero), return+∞. IfvalueToRound is0⁺, return0⁺. Otherwise, return0⁻.
  • down - IfvalueToRound is negative (not zero), return−∞. IfvalueToRound is0⁻, return0⁻. Otherwise, return0⁺.
  • nearest,to-zero - IfvalueToRound is positive or0⁺, return0⁺. Otherwise, return0⁻.

• The argument calculations can resolve to<number>,<dimension>, or<percentage>, but must have the same type, or else the function is invalid; the result will have the same type as the arguments.

• IfvalueToRound is exactly equal to an integer multiple ofroundingInterval,round() resolves tovalueToRound exactly (preserving whethervalueToRound is0⁻ or0⁺, if relevant). Otherwise, there are two integer multiples ofroundingInterval that are potentially "closest" tovalueToRound, lowerroundingInterval which is closer to−∞ and upperroundingInterval which is closer to+∞.

Formal syntax

<round()> =
round(<rounding-strategy>? ,<calc-sum> ,<calc-sum>?)

<rounding-strategy> =
nearest|
up|
down|
to-zero

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Examples

Round positive values

This example demonstrates how theround() function's rounding strategies work for positive values.

Of the five boxes below, theround() function is used to set the height of the last four.The value to be rounded is between 100 px and 125 px in each case, and the rounding value is 25px in all cases.The height of the boxes is therefore either rounded up to 125 px or down to 100 px.

HTML

The HTML defines 5div elements that will be rendered as boxes by the CSS.The elements contain text indicating the rounding strategy, initial value, and expected final height of the box (in parentheses).

<div>height: 100px</div><div>up 101px (125px)</div><div>down 122px (100px)</div><div>to-zero 120px (100px)</div><div>nearest 117px (125px)</div>

CSS

body {  height: 100vh;  display: flex;  justify-content: center;  align-items: center;  gap: 50px;}

The CSS that is applied to all boxes is shown below.Note that we apply acustom CSS property named--rounding-interval, that we will use for the rounding interval.

div.box {  width: 100px;  height: 100px;  background: lightblue;  --rounding-interval: 25px;}

The firstdiv from the left isn't targeted with specific CSS rules, so it will have a default height of 100px.The CSS fordiv two, three, and four is shown below, which round, up, down, and to-zero, respectively.

div.box-2 {  height: round(up, 101px, var(--rounding-interval));}div.box-3 {  height: round(down, 122px, var(--rounding-interval));}div.box-4 {  height: round(to-zero, 120px, var(--rounding-interval));}

Notice how above we indicate the rounding interval usingvar() and the custom CSS property--rounding-interval.

The last box is set without specifying a rounding strategy, and hence defaults tonearest.In this case, the nearest interval to 117 px is 125px, so it will round up.Just for contrast, here we specified hard coded values for both the rounding value and interval.While this is allowed, you wouldn't do this normally because there is no point rounding a number when you already know what the result must be.

div.box-5 {  height: round(117px, 25px);}

Result

If the browser supports the CSSround() function, you should see five columns with heights that are rounded as indicated by their contained text.

Specifications

Browser compatibility

See also

• mod()
• rem()