CSS HTML Validator: The All-In-One HTML, XHTML, CSS, Link, SEO, and Accessibility Checker
Home Help: calc() CSS function

The calc() Function

Additional links:


Use an expression anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. This allows calculations to be performed to determine CSS property values.

Syntax for calc()
CSScalc( <calc-sum> ), where <calc-sum> = "<calc-product> [ [ '+' | '-' ] <calc-product> ]*", <calc-product> = "<calc-value> [ '*' <calc-value> | '/' <number> ]*", and <calc-value> = "<number> | <dimension> | <percentage> | ( <calc-sum> )"


  • Note that the '+' and '-' operators must always be surrounded by whitespace, while the '*' and '/' operators do not require whitespace (but it is recommended for consistency).

Recommended Links

Search Engine Links (for more information)

Help us improve this page: Suggest a link or noteReport a problem