CSS sqrt() Function

The sqrt() function is a CSS math function that calculates the square root of a number.

A square root is simply the value that, when multiplied by itself, gives you the original number. When you use the sqrt() function in CSS, you provide it with a number, and it returns the square root as a unitless value.

For example:

sqrt(9) returns 3
sqrt(16) returns 4
sqrt(2) returns approximately 1.414
sqrt(0) returns 0

While you might use the hypot() function to find diagonal distances, sqrt() is particularly useful for scaling elements proportionally by their area. If you double the width and height of a circle, you actually make its total area four times larger. If you want a circle to have exactly twice the visual weight (area) of another, you need to scale its dimensions by the square root of 2.

Here's an example demonstrating this concept. We have a base circle, and we want the second circle to be exactly twice as large in total area. By using sqrt(2) as our multiplier, we get a perfectly proportioned shape:

.sqrt-circle {
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
    
    /* 
      Calculate the width and height using sqrt().
      We multiply the base size by the square root of our area multiplier.
    */
    width: calc(var(--base-size) * sqrt(var(--area-multiplier)));
    height: calc(var(--base-size) * sqrt(var(--area-multiplier)));
  }

/* The base circle (1x area) */
  .circle-1x { 
    --area-multiplier: 1; 
    background-color: #6c757d;
  }

/* The scaled circle (2x area) */
  .circle-2x { 
    --area-multiplier: 2; 
    background-color: #0d6efd;
  }
</style>

View Output Full Screen Preview

How It Works

The sqrt() function takes a single calculation as its argument. This argument must resolve to a unitless number that is greater than or equal to zero. If you try to pass a negative number (like sqrt(-4)), the result is NaN (Not a Number), and the CSS rule will be ignored.

Because the function returns a unitless number, you will usually need to multiply it by a length unit (like px or rem) inside a calc() function to apply it to sizing properties.

Official Syntax

The official syntax of the sqrt() function is as follows:

Possible Values

As indicated in the official syntax, the sqrt() function accepts the following value:

calc-sum: A mathematical calculation that resolves to a positive, unitless number (or zero). The function evaluates this input and returns its square root.

CSS Specifications

The sqrt() function is defined in CSS Values and Units Module Level 4 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.