Predefined mathematical values.

Predefined mathematical values in CSS.

These values can be used in an expression evaluated with the calc() function or another calculation function, but not directly as a property value. For example, scale:pi; is incorrect, whereas scale:calc(pi); is correct.

It is also important to ensure type matching: width:calc(pi) is incorrect because the width property expects a dimension, whereas pi is a unitless number. However, there is a trick to adapt the types. It consists of writing width:calc(pi * 1px);.

• e: logarithm base, approximately the value 2.7182818284590452354.
• pi: the value of pi is approximately 3.1415926535897932.

The following values result from an impossible calculation (for example, division by zero) or an attempt to calculate with a non-numeric value:

• NaN (Not a Number):indicates that a calculation could not be performed because a value passed as an argument was not a number.
  Note that, unlike usual CSS practice, NaN is case-sensitive.
• infinity and -infinity: these two values usually result from a division by zero. According to the specification, these two terms can also be used as a value to mean 'the largest possible value.'

These values can be used with:

These values can only be used as a parameter for the function calc() and a few other calculation functions. Care must also be taken to match the types:
- The type of the value must correspond to the data type expected by the property.
- If the value is included in a calculation, its type must also be consistent with the calculation.

CSS is quite strict about data types: for example, an integer numeric value like 200 is not interchangeable with the dimension 200px.

Syntax of mathematical calculation values.

• rotate: calc(pi / 4 * 1rad);

  In this example, the value pi / 4 is used to set a rotation. It's surprising, but the value pi is not of an angular type: it must therefore be multiplied by an angular value (in degrees, radians, etc.) to make it compatible with the rotate property.

  Note: the rotate:0.25turn; notation is equivalent.

• scale: calc(e);

  The value e being a unitless number, it can be used to set a property like scale, which also expects a unitless number.

• width: calc(infinity * 1px);

  According to the specification, this notation means 'give the element the maximum possible width'.

Simulator.

This simulator is particularly useful for identifying the mathematical values recognized by your current browser.

The type of value returned by the function must match the data type expected by the property being used. For this reason, the predefined value is multiplied by 1px to convert the value into a dimension, by 1rad or 1deg to convert it into an angle, etc.

Support for mathematical values by browsers.

The predefined values mentioned on this page are now well supported by major browsers (2025).

1

NaN
value

2

infinity
value

3

e
value

4

pi
value

Estimated overall support.

0%

0%

0%

0%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

History of these predefined values.

• CSS Values and Units Module Level 4

  Introduction of the mathematical constants e and pi, as well as the error codes NaN and infinity.
  

  August 14, 2018

  Working Draft.

  

  

  

See also, regarding the calculations.

In addition to these predefined values, many mathematical calculation functions now exist in CSS, and their definitions are described in the module CSS Values and Units Module.

Properties:

⚠

interpolate-size

Determines whether animations or transitions should be abrupt or gradual when a keyword defining an intrinsic dimension is used.

Functions:

abs()

Calculates the absolute value of a number.

acos()

Calculates the angle at which the cosine is equal to the specified value.

asin()

Calculates the angle at which the sine is equal to the specified value.

atan()

Calculates the angle whose tangent is equal to the specified value.

atan2()

Calculates the angle between the x-axis and the line connecting the origin point to the specified point.

attr()

Returns the value of an attribute (standard or custom) from HTML or XML code.

calc()

Performs a calculation. Can be used in place of a value for a property.

⚠

calc-size()

calc-size() allows calculations on the intrinsic dimension of an element (defined by the content).

clamp()

Calculates a value between two extreme values. This function is useful when the units of the parameters are different but of the same type (dimensions, angle...).

cos()

Calculate the cosine of an angle.

exp()

Calculates the exponential of a number.

hypot()

Calculates the square root of a sum of squares of numbers.

⚠

if()

This function allows you to select a value from a proposed list, each value being associated with a condition.

log()

Calculates the logarithm of a number.

max()

Determines the largest value among a series of values.

min()

Determines the smallest value among a series of values.

mod()

Calculates the remainder of the integer division between two numbers.

pow()

Calculates a power boost.

rem()

Calculates the remainder of the integer division between two numbers.

round()

Calculates the rounding of a number.

⚠

sibling-count()

Returns the number of siblings of the element in the document tree, including the element itself.

⚠

sibling-index()

Returns the index of the element among its siblings, that is, among the other elements that have the same parent.

sign()

Determines the sign of a number.

sin()

Calculate the sine of an angle.

sqrt()

Calculates the square root of a number.

⚠

src()

Specifies the address of a resource such as an image for example. Synonym of the url() function.

tan()

Calculates the tangent of an angle.

url()

Specifies the address of a resource such as an image for example.

Values: