CSS calc() Function

The calc function performs calculations.

This function accepts an expression and calculates a property value.

Example

#

This calc function calculates the background-position for the leaf icon. Resizing the browser dynamically updates the 2 coordinate values.

The leaf is calculated to always be at the bottom right.
<style>
  .calc {
    padding: 15px;
    border: solid 1px teal;
    height: 150px;
    background-image: url("/img/css/leaf_icon.jpg");
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) calc(100% - 20px);
  }
</style>

<div class="calc">
  The leaf is calculated to always be at the bottom right.
</div>

Using calc

The calculated value can be used on any length, frequency, angle, time, percentage, number, or integer property value.

The calc function accepts any valid mathematical expression with addition, subtraction, multiplication, and division.

Syntax

calc(expression);

Values

#

Value Description
expression A valid single mathematical expression.
Addition, subtraction, multiplication, or division may be performed.

Browser support

This table shows when calc() support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
9.0 Mar 2011
Opera
15.0 Jun 2013
Safari
7.0 Oct 2013

You may also like

Guides