The calc()
CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
, or <integer>
is allowed.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* property: calc(expression) */
width: calc(100% - 80px);
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.
Notes
- The
+
and-
operators must be surrounded by whitespace. For instance,calc(50% -8px)
will be parsed as a percentage followed by a negative length — an invalid expression — whilecalc(50% - 8px)
is a percentage followed by a subtraction operator and a length. Likewise,calc(8px + -50%)
is treated as a length followed by an addition operator and a negative percentage. - The
*
and/
operators do not require whitespace, but adding it for consistency is both allowed and recommended. - Division by zero results in an error being generated by the HTML parser.
- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if
auto
had been specified. - It is permitted to nest
calc()
functions, in which case the inner ones are treated as simple parentheses.
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> )
Accessibility concerns
When calc()
is used for controlling text size, be sure that one of the values includes a relative length unit, for example:
h1 {
font-size: calc(1.5rem + 3vw);
}
This ensures that text size will scale if the page is zoomed.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Usage with integers
When calc()
is used where an <integer>
is expected, the value will be rounded to the nearest integer. For example:
.modal {
z-index: calc(3 / 2);
}
This will give .modal
a final z-index
value of 2.
Note: The Chrome browser currently won’t accept some values returned by calc()
when an integer is expected. This includes any division, even if it results in an integer. ie. z-index: calc(4 / 2);
will not be accepted.
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: 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
You can also use 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
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 3The definition of 'calc()' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<calc()>
|
Chrome Full support 26 Full support 26 Full support 19 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge
Full support 12 |
Firefox Full support 16 Full support 16 Notes' Before Firefox 57 Prefixed' Implemented with the vendor prefix: -moz- |
IE
Full support 9 |
Opera
Full support 15 |
Safari Full support 7 Full support 7 Full support 6 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android
Full support 28 |
Firefox Android Full support 16 Full support 16 Notes' Before Firefox 57 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android
Full support 14 |
Safari iOS Full support 7 Full support 7 Full support 6 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android
Full support 1.5 |
<color> value support
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 59 |
IE
No support No |
Opera
No support No |
Safari
Full support 6 |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 59 |
Opera Android
No support No |
Safari iOS
Full support 6 |
Samsung Internet Android
No support No |
Gradient color stops support | Chrome
Full support 19 |
Edge
Full support 12 |
Firefox
Full support 19 |
IE
Full support 9 |
Opera
Full support 15 |
Safari
Full support 6 |
WebView Android
Full support 37 |
Chrome Android
Full support 28 |
Firefox Android
Full support 19 |
Opera Android
Full support 15 |
Safari iOS
Full support 6 |
Samsung Internet Android
Full support 1.5 |
Nested calc() support
|
Chrome
Full support 51 |
Edge
Full support 16 |
Firefox
Full support 48 |
IE
No support No |
Opera
Full support 38 |
Safari
Full support 11 |
WebView Android
Full support 51 |
Chrome Android
Full support 51 |
Firefox Android
Full support 48 |
Opera Android
Full support 41 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 5.0 |
<number> value support
|
Chrome
Full support 31 |
Edge
Full support 12 |
Firefox
Full support 48 |
IE
Full support 9 |
Opera
Full support 18 |
Safari
Full support 6 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 31 |
Firefox Android
Full support 48 |
Opera Android
Full support 18 |
Safari iOS
Full support 6 |
Samsung Internet Android
Full support 2.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
calc() by Mozilla Contributors is licensed under CC-BY-SA 2.5.