W3cubDocs

/CSS

<calc-constant>

The <calc-constant> CSS data type represents well-defined constants such as e and π. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.

Syntax

The <calc-constant> type defines numeric constants that can be used in CSS math functions.

Values

e

The base of the natural logarithm, approximately equal to 2.7182818284590452354.

pi

The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.

infinity & -infinity Experimental

An infinite value, used to indicate the largest/smallest possible value.

NaN Experimental

A value representing "Not a Number" canonical casing.

Formal syntax

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

Description

Mathematical constants can only be used inside CSS math functions for calculations. Math constants are not CSS keywords, but if they are used outside of a calculation, they're treated like any other keyword.

For example:

  • animation-name: pi; refers to an animation named "pi", not the pi numeric constant.
  • line-height: e; is invalid, but line-height: calc(e); is valid.
  • rotate(1rad * pi); won't work because rotate() is not a math function. Use rotate(calc(1rad * pi));

In math functions, <calc-constant> values are evaluated as <number> values, therefore e and pi act as numeric constants.

Both infinity and NaN are slightly different, they are considered as degenerate numeric constants. While not technically numbers, they act as <number> values. Thus to get an infinite <length>, for example, requires an expression like calc(infinity * 1px).

The infinity and NaN values are included mostly to make serialization simpler and more obvious, but can be used to indicate a "largest possible value", since an infinite value gets clamped to the allowed range. It's rare for this to be reasonable, but when using infinity its much simpler than just putting an enormous number in a stylesheet.

CSS constants are case-insensitive. Thus, calc(Pi), calc(E) and calc(InFiNiTy) are all valid.

There is only one exception: NaN is case-sensitive and must be written exactly as NaN. Both nan and NAN are invalid constants.

Valid values:

e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN

Invalid values:

nan
Nan
NAN

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
NaN No No 108 No No No No No 108 No No No
calc-constant No No 108 No No 15.4 No No 108 No 15.4 No
e No No 108 No No 15.4 No No 108 No 15.4 No
infinity No No 108 No No No No No 108 No No No
pi No No 108 No No 15.4 No No 108 No 15.4 No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc-constant