CSS abs() Function

CSS abs() Function

The CSS abs() function calculates the absolute value of a numeric expression. It returns the value without a negative sign, making it useful when a calculation must produce a non-negative result. The function supports numbers, lengths, percentages, angles, and other compatible CSS numeric values.

Syntax

abs(value)

The abs() function accepts one numeric expression and returns its absolute value.

For example:

width: abs(-200px);

The result is 200px.

The function can also evaluate calculations:

width: abs(100px - 250px);

The expression evaluates to -150px, and abs() returns 150px.

The function can be used anywhere its resulting numeric type is accepted by the CSS property.

Parameters

The abs() function accepts a single argument.

The argument can contain a number, dimension, percentage, mathematical expression, or compatible CSS math function.

Examples include:

abs(-10)
abs(-25px)
abs(-50%)
abs(-45deg)
abs(100px - 250px)
abs(var(--offset))

The returned value has the same numeric type as the input.

For example, a length returns a length, and an angle returns an angle.

The function requires exactly one argument. Multiple comma-separated arguments are invalid.

How It Works

The absolute value of a number is its distance from zero, regardless of whether the original value is positive or negative.

The abs() function follows three basic rules:

1. A positive value remains positive.
2. A negative value becomes positive.
3. Zero remains zero.

For example:

abs(50px)   /* 50px */
abs(-50px)  /* 50px */
abs(0px)    /* 0px */

The function does not change the unit of measurement.

It changes only the sign of the value when necessary.

For calculations, the browser evaluates the expression before determining its absolute value.

abs(20px - 80px)

The calculation produces -60px, so the function returns 60px.

CSS math functions are evaluated by the browser as part of the property's computed value processing.

Positive and Negative Values

The abs() function produces a non-negative result for ordinary finite numeric values.

The following table shows how different inputs are evaluated.

Notice that abs() does not round values or limit them to a particular maximum.

It simply returns the magnitude of the supplied expression.

Using Calculations

The abs() function can evaluate arithmetic expressions using the same calculation rules as other CSS math functions.

For example:

.example {
  margin-left: abs(50px - 120px);
}

The calculation produces -70px, and the resulting margin is 70px.

You can also combine abs() with calc():

.example {
  margin-left: abs(calc(50px - 120px));
}

This produces the same result.

The additional calc() wrapper is optional because abs() accepts mathematical expressions directly.

Another example calculates the difference between two lengths:

.example {
  padding-left: abs(200px - 125px);
}

The resulting padding is 75px.

When using arithmetic, the values must have compatible numeric types.

For example, subtracting two lengths is valid, but adding an unrelated angle to a length is not.

Using Custom Properties

The abs() function can be combined with CSS custom properties to calculate values dynamically.

For example:

:root {
  --offset: -40px;
}
.example {
  margin-left: abs(var(--offset));
}

The custom property contains -40px, but the resulting margin is 40px.

Changing the custom property changes the result automatically.

:root {
  --offset: 75px;
}

The resulting margin is now 75px.

This is useful when a value may be positive or negative, but the CSS property should receive its magnitude.

For example, the difference between two measurements can be calculated without needing to know which measurement is larger.

:root {
  --first-width: 120px;
  --second-width: 200px;
}
.example {
  padding-left: abs(var(--first-width) - var(--second-width));
}

The resulting padding is 80px.

Example

The following example demonstrates how abs() converts negative values into positive lengths.

Three bars use different input values. The first two values are negative, but all three bars display positive widths.

HTML:

<div class="abs-demo">
  <div class="abs-row">
    <span>-60px</span>
    <div class="abs-bar abs-bar-one"></div>
  </div>
  <div class="abs-row">
    <span>-120px</span>
    <div class="abs-bar abs-bar-two"></div>
  </div>
  <div class="abs-row">
    <span>180px</span>
    <div class="abs-bar abs-bar-three"></div>
  </div>
</div>

CSS:

.abs-demo {
  display: grid;
  gap: 12px;
}
.abs-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.abs-row span {
  width: 55px;
  flex-shrink: 0;
}
.abs-bar {
  height: 24px;
  background-color: #0066cc;
}
.abs-bar-one {
  width: abs(-60px);
}
.abs-bar-two {
  width: abs(-120px);
}
.abs-bar-three {
  width: abs(180px);
}

The first bar has a width of 60px, the second has a width of 120px, and the third has a width of 180px.

The negative inputs do not produce negative widths because abs() returns their absolute values.

The Browser Result includes fixed-width fallback declarations for browsers that do not support abs().

abs() vs. max()

The abs() and max() functions can both produce non-negative values, but they work differently.

The abs() function returns the magnitude of a value:

width: abs(-100px);

The result is 100px.

The max() function selects the largest value from its arguments:

width: max(0px, -100px);

The result is 0px.

Use abs() when you need the distance from zero.

Use max() when you need to select the greater of two or more values, such as preventing a result from falling below zero.

Common Uses

The abs() function is useful whenever a calculation may produce a negative result but only its magnitude is needed.

For example, a calculation can determine the absolute difference between two widths:

.example {
  --width-a: 150px;
  --width-b: 220px;
  margin-left: abs(var(--width-a) - var(--width-b));
}

The resulting margin is 70px.

The calculation produces the same result if the two width values are reversed.

Limitations

The abs() function has several important limitations.

• It accepts exactly one numeric expression.
• It cannot operate directly on strings, colors, or other non-numeric values.
• It does not remove the unit from a value.
• It does not round or clamp values to a maximum.
• It does not make incompatible numeric types compatible.
• The resulting value must be valid for the CSS property where it is used.
• Older browsers may not recognize the function.

For example:

width: abs(-50px);

This is a valid use because the resulting length can be used for width.

However:

width: abs(-45deg);

This is not valid for width because the function returns an angle, not a length.

The function does not convert degrees into pixels.

Similarly, the following expression is invalid because the arguments use incompatible types:

width: abs(50px + 30deg);

Use compatible numeric values and confirm that the resulting type is accepted by the destination property.

Browser Support

The abs() function is a modern CSS math function. Browser support varies by browser and version, and it should not be assumed to work in older browsers.

When supporting older browsers, provide a fallback declaration before the declaration using abs().

.example {
  width: 100px;
  width: abs(-100px);
}

Browsers that support abs() use the calculated value. Browsers that do not support it retain the earlier valid declaration.

You can also check for support using @supports:

@supports (width: abs(-100px)) {
  .example {
    width: abs(-100px);
  }
}

For current compatibility information, visit Can I Use? and search for CSS abs() or CSS math functions.

Check the target browsers before relying on the function in production layouts.

Specifications

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

The specification defines abs() as a mathematical function that returns the absolute value of its argument.

Related CSS math functions include sign(), calc(), min(), max(), and clamp().