CSS - hypot() Function

Quiz

CSS hypot() function is a mathematical function that returns the square root of the sum of the squares of the numbers specified in its parameter. For calculating the Euclidean distance, the CSS hypot() function can be used. You need to specify units of the values and all units must be of the same type.

Syntax

The syntax for the CSS hypot() function is as follows:

hypot(num1, num2, ...)

Parameter

CSS hypot() function accepts one or more required parameters as given below:

Parameter	Description
num1, num2, ...	It represents the number for which Euclidean distance is being calculated.

Examples of CSS hypot() Function

The following examples illustrate the use of the CSS hypot() function in various scenarios.

Scaling Width Using hypot() Function

In this example, we used the hypot() function to calculate the width of the div containers.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS hypot() Function</title>
    <style>
        div {
            height: 100px;
            display: inline-block;
            margin: 10px;
        }

        .box1 {
            background-color: #f2ca5c;
            width: calc(hypot(40px, 30px));
        }

        .box2 {
            background-color: #04af2f;
            width: calc(hypot(60px, 20px));
        }

        .box3 {
            background-color: #031926;
            width: calc(hypot(80px, 40px));
        }
    </style>
</head>

<body>
    <h2>CSS hypot() Function</h2>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

Setting Font Size with hypot() Function

In this example, we used the CSS hypot() function to define the font sizes of the paragraphs.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS hypot() Function</title>
    <style>
        .txt1 {
            font-size: calc(hypot(6px, 8px));
        }

        .txt2 {
            font-size: calc(hypot(1em, 2em));
        }

        .txt3 {
            font-size: calc(hypot(1em, 3em));
        }
    </style>
</head>

<body>
    <h2>CSS hypot() Function</h2>
    <p class="txt1">This is paragraph 1</p>
    <p class="txt2">This is paragraph 2</p>
    <p class="txt3">This is paragraph 3</p>
</body>

</html>

Using hypot() Function in Border Radius

In this example, we have used the CSS hypot() function to set the border radius of the div boxes.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS hypot() Function</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f0f0ff;
            display: inline-block;
            margin: 10px;
        }

        .box1 {
            border-radius: calc(hypot(10px, 10px));
        }

        .box2 {
            border-radius: calc(hypot(15px, 20px));
        }

        .box3 {
            border-radius: calc(hypot(25px, 30px));
        }
    </style>
</head>

<body>
    <h2>CSS hypot() Function</h2>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>

</html>

Supported Browsers

Function
hypot()	120	120	118	15.4	106

Print Page