W3cubDocs

/CSS

hypot()

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`hypot`	No	No	112	No	No	15.4	No	No	112	No	15.4	No