CSS hypot() function

Definition and usage

CSS's hypot() The function returns the square root of the sum of the squares of its parameters.

The return value is calculated by the formula sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn).

hypot() The function accepts values with units, but all values must have the same unit.

Example

Using hypot() Set the element's width:

div.a {
  width: hypot(80px); /* 80px */
}
div.b {
  width: hypot(40px, 80px); /* 89,44px */
}
div.c {
  width: hypot(40px, 80px, 100px); /* 134,16 */
}
div.d {
  width: hypot(40px, 80px, 100px, 120px); /* 180 */
}
div.e {
  width: hypot(10%, 20%, 40%); /* 45,82% */
}

Try it yourself

CSS syntax

hypot(x1, x2, x3, ...)

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this function.

Related pages

Reference:CSS acos() function

Reference:CSS asin() function

Reference:CSS atan2() function

Reference:CSS calc() function

Reference:CSS cos() function

Reference:CSS exp() function

Reference:CSS hypot() function

Reference:CSS log() function

Reference:CSS mod() function

Reference:CSS pow() function

Reference:CSS sin() function

Reference:CSS sqrt() function

Reference:CSS tan() function