# hypot()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The `hypot()` CSS function is an exponential function that returns the square root of the sum of squares of its parameters.

While `pow()` and `sqrt()` only work on unitless numbers, `hypot()` accepts values with units, but they all must have the same type.

## Syntax

``````/* A <number> value */
width: hypot(2em); /* 2em */
width: hypot(3em, 4em); /* 5em */
width: hypot(30px, 40px); /* 50px */
width: hypot(48px, 64px); /* 80px */
width: hypot(3px, 4px, 5px); /* 7.0710678118654755px */
``````

### Parameters

The `hypot(x [, ...]#)` function accepts one or more comma-separated calculations as its parameters.

`x`, `x2`, ..., `xN`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>`.

### Return value

Returns a `<number>`, `<dimension>`, or `<percentage>` (based on the inputs), which is the square root of the sum of squares of its parameters.

• If any of the inputs is `infinite`, the result is `+∞`.
• If a single parameter is provided, the result is the absolute value of its input. `hypot(2em)` and `hypot(-2em)` both resolve to `2em`.

### Formal syntax

`<hypot()> =   hypot( <calc-sum># )  <calc-sum> =   <calc-product> [ [ '+' | '-' ] <calc-product> ]*  <calc-product> =   <calc-value> [ [ '*' | '/' ] <calc-value> ]*  <calc-value> =   <number>         |  <dimension>      |  <percentage>     |  <calc-constant>  |  ( <calc-sum> )   <calc-constant> =   e          |  pi         |  infinity   |  -infinity  |  NaN        `

## Specifications

Specification
CSS Values and Units Module Level 4
# exponent-funcs

## Browser compatibility

BCD tables only load in the browser