# clamp

The clamp CSS function takes three calculations — a minimum value, a central value, and a maximum value — and represents its central calculation.

It is clamped according to its min and max calculations, favoring the min calculation if it conflicts with the max. (That is, given clamp(MIN, VAL, MAX), it represents exactly the same value as max(MIN, min(VAL, MAX))).

## Syntax

### CSS

`clamp()`

### Values

```<clamp()> =
clamp(
<calc-sum>#{3}
)```
```<calc-sum> =
<calc-product>
[ [ '+' | '-' ] <calc-product> ]*```
```<calc-product> =
<calc-value>
[ [ '*' | '/' ] <calc-value> ]*```
```<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> )```
`<number>`

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

`<dimension>`

A number with a unit.

`<percentage>`

Specifies the percentage using a number followed by a percent sign (%).

```<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN```
`e`

The base of the natural logarithm, approximately equal to 2.7182818284590452354.

`pi`

The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.

`infinity`

Positive infinity.

`-infinity`

Negative infinity.

`NaN`

Not a number.

`*`

Multiplication.

`/`

Division.

`+`

`-`

Subtraction.

## Examples

### 7 · JS · Internal  