Published Jul 12, 2021Updated Sep 3, 2021
Contribute to Docs

Performs mathematical calculations to determine values for properties.


<property>: calc(<expression>);

where <expression> can be any simple expression combining the following operators, using standard operator precedence rules:

  • +: addition.
  • -: subtraction.
  • *: multiplication.
  • /: division.

Note: Spaces are required around the - and + operators. They are not required for / and * operators.

Example 1

Calculate the total width of the div using absolute lengths.

div {
width: calc(10px + 120px);

This will be 130px wide.

Example 2

Set the value of the .box element’s width property to the result of 50% - 10px:

.box {
width: calc(50% - 10px);

Absolute lengths and relative lengths are both available to perform calculations.

Example 3

Set the width property to 10px less than the CSS variable --custom-width:

.card {
--custom-width: 33%;
width: calc(var(--custom-width) - 10px));

All contributors

Looking to contribute?

Learn CSS on Codecademy