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)
andhypot(-2em)
both resolve to2em
.
Formal syntax
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # exponent-funcs |
Browser compatibility
BCD tables only load in the browser