CSS sqrt() Function

CSS sqrt() Function

The CSS sqrt() function calculates the square root of a nonnegative number.

It can be used in CSS mathematical expressions to calculate dimensions, spacing, scaling, and other numeric values. The function returns a unitless number that can be combined with compatible CSS units.

Syntax

sqrt(number)

The sqrt() function accepts one calculation that resolves to a number.

Examples:

sqrt(4)
sqrt(9)
sqrt(16)
sqrt(25)
sqrt(2)
sqrt(10 + 6)

The function returns the nonnegative square root of its argument when the argument is nonnegative.

It can be used inside CSS calculations:

width: calc(50px * sqrt(4));
height: calc(40px * sqrt(9));
margin-left: calc(10px * sqrt(16));
transform: scale(sqrt(2));

Because the result is a number, it can be multiplied by a length or used directly where a CSS property accepts a number.

For example:

opacity: calc(sqrt(4) / 4);

Since sqrt(4) returns 2, the calculated opacity is 0.5.

Parameters

The sqrt() function requires exactly one argument.

The argument may be a literal number, a mathematical expression, or a custom property containing a number.

For example:

sqrt(25)
sqrt(10 + 15)
sqrt(5 * 5)
sqrt(var(--value))
sqrt(calc(100 / 4))

Each expression above can resolve to the number 25, producing a square root of 5.

The argument must resolve to a number rather than a length, angle, or other dimension.

For example, sqrt(25px) is invalid because the argument has a length unit.

A negative argument produces NaN rather than a real square root.

Return Values

The sqrt() function returns the square root of its argument as a number.

Perfect squares produce whole-number results. Other nonnegative values may produce decimal results.

The function also handles special numeric values. Positive infinity returns positive infinity, while negative zero returns negative zero.

For ordinary nonnegative inputs, the result is always nonnegative.

How It Works

A square root is a number that produces the original value when multiplied by itself.

For example:

sqrt(25)

The result is 5 because 5 * 5 = 25.

Similarly:

sqrt(64)

The result is 8 because 8 * 8 = 64.

In CSS, the returned number can be used to calculate a property value:

.box {
  width: calc(30px * sqrt(16));
}

The square root of 16 is 4, so the resulting width is 120px.

Changing the argument to 9 produces a width of 90px.

The function does not add units to its result. The surrounding CSS expression determines the final numeric type.

Using sqrt() in Calculations

The sqrt() function can be combined with arithmetic operators and other CSS mathematical functions.

Calculating Width

.box {
  width: calc(40px * sqrt(9));
}

The calculated width is 120px.

Calculating Height

.box {
  height: calc(25px * sqrt(16));
}

The calculated height is 100px.

Calculating Spacing

.box {
  padding: calc(8px * sqrt(4));
}

The resulting padding is 16px.

Using a Decimal Result

.box {
  width: calc(100px * sqrt(2));
}

The calculated width is approximately 141.42px.

Combining With clamp()

.box {
  width: clamp(100px, calc(50px * sqrt(9)), 200px);
}

The square root calculation produces 150px, which is within the permitted range.

The resulting width is 150px.

These calculations are useful when dimensions or spacing need to follow a mathematical relationship instead of using unrelated fixed values.

sqrt() vs. pow()

The sqrt() and pow() functions are related mathematical functions.

The sqrt() function calculates a square root, while pow() raises a number to a specified power.

For ordinary nonnegative numbers, these expressions are equivalent:

sqrt(36)
pow(36, 0.5)

Both return 6.

Use sqrt() when calculating a square root. Use pow() when a calculation requires a different exponent.

The functions have some differences in how special numeric values are handled, so they are not interchangeable in every possible calculation.

CSS Custom Properties

CSS custom properties can supply values to the sqrt() function.

For example:

.box {
  --value: 16;
  --base-size: 30px;
  width: calc(var(--base-size) * sqrt(var(--value)));
}

The square root of 16 is 4, so the calculated width is 120px.

Changing --value to 25 produces a width of 150px.

A fallback value can also be supplied:

.box {
  width: calc(30px * sqrt(var(--value, 9)));
}

If --value is not defined, the function uses 9 and produces a width of 90px.

Custom properties make it possible to reuse the same calculation with different numeric inputs.

Example

The following example uses sqrt() to calculate the widths of four boxes from different numeric values.

HTML:

<div class="sqrt-demo">
  <div class="sqrt-item" style="--value: 1;">sqrt(1)</div>
  <div class="sqrt-item" style="--value: 4;">sqrt(4)</div>
  <div class="sqrt-item" style="--value: 9;">sqrt(9)</div>
  <div class="sqrt-item" style="--value: 16;">sqrt(16)</div>
</div>

CSS:

.sqrt-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sqrt-item {
  box-sizing: border-box;
  width: 60px;
  padding: 12px 8px;
  color: #fff;
  background-color: #3498db;
  text-align: center;
}
@supports (width: calc(60px * sqrt(4))) {
  .sqrt-item {
    width: calc(60px * sqrt(var(--value)));
  }
}

The calculated widths are 60px, 120px, 180px, and 240px.

Each box uses the same calculation with a different custom property value.

Browsers without sqrt() support use the fallback width of 60px.

Spacing Example

The following example uses sqrt() to calculate different amounts of horizontal padding.

HTML:

<div class="sqrt-spacing-demo">
  <div class="sqrt-spacing-item" style="--value: 1;">Small</div>
  <div class="sqrt-spacing-item" style="--value: 4;">Medium</div>
  <div class="sqrt-spacing-item" style="--value: 9;">Large</div>
</div>

CSS:

.sqrt-spacing-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.sqrt-spacing-item {
  padding: 12px 10px;
  color: #fff;
  background-color: #2e86c1;
}
@supports (padding-left: calc(10px * sqrt(4))) {
  .sqrt-spacing-item {
    padding-left: calc(10px * sqrt(var(--value)));
    padding-right: calc(10px * sqrt(var(--value)));
  }
}

The first item uses 10px of horizontal padding, the second uses 20px, and the third uses 30px.

The vertical padding remains 12px for all three items.

This demonstrates how a mathematical function can control spacing while keeping the same CSS rules.

Transform Example

The sqrt() function can also calculate scale factors for CSS transforms.

The following example uses the square roots of different numbers to scale three boxes.

HTML:

<div class="sqrt-transform-demo">
  <div class="sqrt-transform-item" style="--value: 1;">1</div>
  <div class="sqrt-transform-item" style="--value: 2;">2</div>
  <div class="sqrt-transform-item" style="--value: 4;">4</div>
</div>

CSS:

.sqrt-transform-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 50px 20px;
}
.sqrt-transform-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #fff;
  background-color: #16a085;
}
@supports (transform: scale(sqrt(2))) {
  .sqrt-transform-item {
    transform: scale(sqrt(var(--value)));
  }
}

The first box has a scale factor of 1, the second approximately 1.414, and the third 2.

The transformation changes the boxes' visible sizes without changing their original layout dimensions.

Using square roots produces a nonlinear relationship between the input value and the scale factor.

Common Uses

The sqrt() function is useful when CSS calculations require square-root relationships.

• Calculated dimensions: Determine widths and heights from numeric inputs.
• Spacing systems: Calculate padding, margins, or gaps using square-root values.
• Transform scaling: Use square roots to determine scale factors.
• Custom properties: Apply the same mathematical expression to different numeric values.
• Nonlinear sizing: Increase visual sizes more gradually than the underlying input values.
• Mathematical layouts: Combine square roots with other CSS functions for calculated dimensions.

For example:

.item {
  --factor: 9;
  width: calc(40px * sqrt(var(--factor)));
}

The resulting width is 120px.

The same declaration can be reused with different values of --factor.

Limitations

The sqrt() function has several requirements and behaviors to consider.

• It requires exactly one calculation argument.
• The argument must resolve to a CSS <number>.
• Length values such as 16px cannot be used directly as the argument.
• A negative finite argument produces NaN.
• The result is a number, not a length or percentage.
• Non-perfect squares may produce approximate decimal results.
• Positive infinity returns positive infinity.
• Negative zero produces negative zero.
• Calculations must use compatible CSS numeric types.
• Older browsers may not support the function.

Valid and Invalid Arguments

These expressions are valid:

sqrt(16)
sqrt(10 + 6)
sqrt(4 * 4)
sqrt(var(--value, 9))

The following expression is invalid because the argument is a length:

sqrt(16px)

The following expression is invalid because the function accepts only one argument:

sqrt(9, 16)

Negative Values

Consider this calculation:

width: calc(50px * sqrt(-9));

Because the square root of a negative finite number is not a real number, sqrt(-9) produces NaN.

The resulting width cannot be used as an ordinary positive length.

When a calculation may receive negative inputs, use max() to prevent the argument from becoming negative:

width: calc(50px * sqrt(max(0, var(--value))));

This limits the input to zero or greater before calculating its square root.

Feature Detection

Use @supports to provide a fallback for browsers without sqrt() support.

.box {
  width: 100px;
}
@supports (width: calc(50px * sqrt(4))) {
  .box {
    width: calc(50px * sqrt(var(--value, 4)));
  }
}

In supporting browsers, the width is calculated using the square root of the custom property value.

In older browsers, the width remains 100px.

Browser Support

The CSS sqrt() function has Baseline Widely available browser support. It has been supported across major browser engines since December 2023.

Support includes modern versions of Chrome, Edge, Firefox, and Safari.

Older browser versions may not support CSS exponential functions. Provide fallback values when calculations are essential to a layout.

For current compatibility information, visit Can I Use? and search for sqrt().

Specifications

The sqrt() function is defined in the CSS Values and Units Module Level 4 specification.

The specification defines its argument type, numeric return value, and handling of negative inputs and special numeric values.

Related functions include pow(), hypot(), log(), exp(), and calc().