CSS - sqrt() Function

Quiz

CSS sqrt() function is a mathematical function that returns the square root of a given number specified in the function parameter.

Syntax

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

sqrt(number)

Parameter

CSS sqrt() function accepts one required parameter as given below:

Parameter	Description
number	It represents the value for which we want to calculate the square root.

Examples of CSS sqrt() Function

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

Scaling Width with sqrt() Function

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

Example

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

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

        .box1 {
            background-color: #f2ca5c;
            scale: calc(1 / sqrt(4));            
        }

        .box2 {
            background-color: #031926;
            scale: calc(1 / sqrt(3));
        }

        .box3 {
            background-color: #04af2f;
            scale: calc(1 / sqrt(2));
        }
    </style>
</head>

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

</html>

Setting Font Size Using sqrt() Function

In this example, we have used the sqrt() function to define the font size of the paragraphs.

Example

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

<head>
    <title>CSS sqrt() Function</title>
    <style>
        .txt1 {
            font-size: calc(1em * sqrt(3));
        }

        .txt2 {
            font-size: calc(1.5em * sqrt(6));
        }

        .txt3 {
            font-size: calc(20px * sqrt(10));
        }
    </style>
</head>

<body>
    <h2>CSS sqrt() 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 sqrt() Function in Border Radius

In this example, we have used the sqrt() function to define the border radius of three div boxes.

Example

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

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

        .box1 {
            border-radius: calc(10px * sqrt(2));
        }

        .box2 {
            border-radius: calc(15px * sqrt(3));
        }

        .box3 {
            border-radius: calc(20px * sqrt(4));
        }
    </style>
</head>

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

</html>

Supported Browsers

Function
sqrt()	120	120	118	15.4	106

Print Page