round()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The round()
CSS function returns a rounded number based on a selected rounding strategy.
Syntax
width: round(var(--width), 50px);
width: round(up, 101, 10);
width: round(down, 106, 10);
margin: round(to-zero, -105, 10);
Parameter
The round(<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).
The valueToRound
is rounded according to the rounding strategy, to the nearest integer multiple of roundingInterval
.
<rounding-strategy>
-
The rounding strategy. This may be one of the following values:
up
-
Round
valueToRound
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
-
Round
valueToRound
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)-
Round
valueToRound
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
-
Round
valueToRound
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.
Return value
The value of valueToRound
, rounded to the nearest lower or higher integer multiple of roundingInterval
, depending on the rounding strategy
.
- If
roundingInterval
is 0, the result isNaN
. - If
valueToRound
androundingInterval
are bothinfinite
, the result isNaN
. - If
valueToRound
is infinite butroundingInterval
is finite, the result is the sameinfinity
. - If
valueToRound
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. - If
valueToRound
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-constant> |
( <calc-sum> )
<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # funcdef-round |
Browser compatibility
BCD tables only load in the browser