< css‎ | functions
Jump to: navigation, search


This article is Ready to Use.

W3C Candidate Recommendation


The calc() function can be used anywhere in a length is required by a CSS properties. calc() allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The values themselves can be a mixture of percentages, integers, numbers, lengths such as em or cm, angles or even time values ( seconds, milliseconds). Calc is useful for computing certain values that are not known at the development time or to set formulated values rather that arbitrary ones.


This is an example of how can you use calc in CSS


/* CSS calc function example */
.header {
     margin: 0px auto;
     width: 80%; /* fallback for browsers without support for calc() */
     width: calc(100% - 100px); /* CSS3 compliant implementation; Firefox 16 and IE 9, and above */
     border: solid black 1px;
     box-shadow: 5px 5px #999;
     margin-top: 40px;
     padding: 10px;
     text-align: center;
.header:hover {
     width: calc(100% / 3 - 2 * 1em); /* complex calculation on hover */
     width: 25%; /* fallback */

View live example


If you divide by zero it will cause an error in the HTML parser. Also the return value that will be computed must comply within the range of the relevant CSS target. For example width or height cannot be negative so it will be reverted to 0;

Related specifications

Specification Status Related Changes
W3C CSS Values and Units Module Level 3: Mathematical Expressions: "calc" Candidate Reccomendation