calc()

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is allowed.

/* property: calc(expression) */
width: calc(100% - 80px);

Syntax

The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules:

+

Addition.

-

Subtraction.

*

Multiplication. At least one of the arguments must be a <number>.

/

Division. The right-hand side must be a <number>.

The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

Formal syntax

calc( <calc-sum> )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Examples

Positioning an object on screen with a margin

calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

.banner {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banner">This is a banner!</div>

Automatically sizing form fields to fit their container

Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

Nested calc() with CSS Variables

Consider the following code:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

After all variables are expanded, widthC's value will be calc( calc( 100px / 2) / 2), then when it's assigned to .foo's width property, all inner calc()s (no matter how deeply nested) will be flattened to just parentheses, so the width property's value will be eventually calc( ( 100px / 2) / 2), i.e. 25px. In short: a calc() inside of a calc() is identical to just parentheses.

Specifications

Browser compatibility

[1] Support for the non-standard prefixed version -moz-calc() was removed in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50).

[2] In WebKit 6.0 the implementation was incorrect.

[3] See Chromium bug 600113.

Quantum CSS notes

• In Gecko, calc() expressions are rejected — causing the value to be invalid — when used as the radius component of a radial-gradient() function (bug 1376019). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57) fixes this.
• In Gecko, calc(1*2*3) is not parsed successfully; Quantum CSS fixes this (bug 1379467).
• In Quantum CSS, calc() is supported everywhere that the spec explains it should be (bug 1350857). In Gecko it is not.

See also

• Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog