CSS HTML Validator - The fast, all-in-one, HTML, CSS, Link, SEO, spelling, and accessibility checker for Windows, & htmlval for Mac and Linux
Home Help: calc() CSS function

The calc() Function

Use an expression anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <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> | '/' <calc-number-value> ]*", 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