CSS

calc()

Function

❮ CSS Functions Reference

Example

Use calc() to calculate the width of a <div> element:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% – 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

Try it Yourself »

Definition and Usage

The calc() function performs a calculation to be used as the property value.

Version:
CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the
function.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Function

calc()
26.0
19.0 -webkit-
9.0
16.0
4.0 -moz-
7.0
6.0 -webkit-
15.0

CSS Syntax

calc(expression)

Value
Description

expression
Required. A mathematical expression. The result will be used as the value.
The following operators can be used: + – * /

❮ CSS Functions Reference