CSS calc()

Published Jul 12, 2021Updated Sep 3, 2021

Performs mathematical calculations to determine values for properties.

Syntax

<property>: calc(<expression>);

Copy to clipboardCopy to clipboard

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

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

Calculate the total width of the div using absolute lengths.

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

Copy to clipboardCopy to clipboard

This will be 130px wide.

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

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

Copy to clipboardCopy to clipboard

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

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

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

Copy to clipboardCopy to clipboard