sqrt()
Baseline 2023Newly 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 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
greater than or equal to 0.
Return value
Formal syntax
Examples
Scale sizes based on square root
This example shows how you can use the sqrt()
function to calculate sizes.
HTML
html
50px
100px
150px
200px
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);
}
Result
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # exponent-funcs |