CSS calc() function

Definition and usage

CSS's calc() The function performs the calculation and uses the result as the attribute value.

Example

Use calc() Calculate the width of the <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

CSS syntax

calc(expression)
Value Description
expression

Required. A mathematical expression whose result will be used as a value.

The following operators can be used: +, -, *, /.

Technical details

Version: CSS3

Browser support

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

Chrome Edge Firefox Safari Opera
26 9 16 7 15

Related pages

Reference:CSS acos() function

Reference:CSS asin() function

Reference:CSS atan() function

Reference:CSS atan2() function

Reference:CSS cos() function

Reference:CSS exp() function

Reference:CSS hypot() function

Reference:CSS log() function

Reference:CSS mod() function

Reference:CSS pow() function

Reference:CSS sin() function

Reference:CSS sqrt() function

Reference:CSS tan() function