sqrt()

Baseline2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The `sqrt()` CSS function is an exponential function that returns the square root of a number.

The function `pow(x, 0.5)` is equivalent to `sqrt(x)`.

Syntax

css
``````/* A <number> value */
width: calc(100px * sqrt(9)); /*  300px */
width: calc(100px * sqrt(25)); /*  500px */
width: calc(100px * sqrt(100)); /* 1000px */
``````

Parameters

The `sqrt(x)` function accepts only one value as its parameter.

`x`

A calculation which resolves to a `<number>` greater than or equal to 0.

Return value

Returns a `<number>` which is the square root of `x`.

• if `x` is `+∞`, the result is `+∞`.
• If `x` is `0⁻`, the result is `0⁻`.
• If `x` is less than `0`, the result is `NaN`.

Formal syntax

`<sqrt()> =   sqrt( <calc-sum> )  <calc-sum> =   <calc-product> [ [ '+' | '-' ] <calc-product> ]*  <calc-product> =   <calc-value> [ [ '*' | '/' ] <calc-value> ]*  <calc-value> =   <number>        |  <dimension>     |  <percentage>    |  <calc-keyword>  |  ( <calc-sum> )  <calc-keyword> =   e          |  pi         |  infinity   |  -infinity  |  NaN        `

Examples

Scale sizes based on square root

This example shows how you can use the `sqrt()` function to calculate sizes.

HTML

html
``````<div class="boxes">
<div class="box">50px</div>
<div class="box one">100px</div>
<div class="box two">150px</div>
<div class="box three">200px</div>
</div>
``````

CSS

Here we are using CSS custom properties to define the sizes to be used. First, we declare the first size (`--size-0`), which is then used to calculate the other sizes.

• `--size-1` is calculated by multiplying the value of `--size-0` (50px) by the square root of 4 (2), which results in 100px.
• `--size-2` is calculated by multiplying the value of `--size-0` (50px) by the square root of 9 (3), which results in 150px.
• `--size-3` is calculated by multiplying the value of `--size-0` (50px) by the square root of 16 (4), which results in 200px.
css
``````:root {
--size-0: 50px;
--size-1: calc(var(--size-0) * sqrt(4)); /*  100px */
--size-2: calc(var(--size-0) * sqrt(9)); /*  150px */
--size-3: calc(var(--size-0) * sqrt(16)); /*  200px */
}
``````

The sizes are then applied as the `width` and `height` values of the selectors.

css
``````.one {
width: var(--size-1);
height: var(--size-1);
}
.two {
width: var(--size-2);
height: var(--size-2);
}
.three {
width: var(--size-3);
height: var(--size-3);
}
``````

Specifications

Specification
CSS Values and Units Module Level 4
# exponent-funcs

Browser compatibility

BCD tables only load in the browser