calc() keywords
The <calc-keyword> CSS data type represents well-defined constants such as e and pi. 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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 108 | 15.4 | 99 | 15.4 | |
NaN `NaN` constant | 99 | 99 | 114 | 16 | 99 | 16 |
e `e` constant | 110 | 110 | 108 | 15.4 | 110 | 15.4 |
infinity `infinity` and `-infinity` constants | 99 | 99 | 114 | 16 | 99 | 16 |
pi `pi` constant | 109 | 109 | 108 | 15.4 | 109 | 15.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.circle-text {
/* Use pi to calculate the circumference */
--circumference: calc(2 * pi * var(--radius));
}
.full-rotation {
/* Rotate 1 full revolution in radians */
transform: rotate(calc(2 * pi * 1rad));
}
.always-on-top {
/* Use infinity as the maximum z-index */
z-index: calc(infinity);
}Live demo
Circlecalculation with pi
Circlecalculation demo. with calc constants (e, pi, infinity, NaN) pi
PreviewFullscreen
beforeface with infinity
beforeface demo. with calc constants (e, pi, infinity, NaN) infinity
PreviewFullscreen
Use cases
-
Formula-based styling
Build expressive calculations for geometry, trigonometry, or generated dimensions directly in CSS.
-
Design system math
Encode reusable mathematical relationships without relying on hand-computed constants.
Cautions
- More mathematical power also makes CSS harder to scan if the formulas are not named or documented well.
- Use advanced constants only when they improve clarity or maintainability over literal values.
Accessibility
- Formula-driven styling should still preserve readable sizing, spacing, and zoom behavior.
- Do not let clever math obscure simple layout rules that teammates need to maintain.