CSS min() Function

CSS Functions

Example

Using the min() function to set the width of #div1 to the smallest value, either 50% or 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Definition and Usage

The min() function allows you to select the smallest value from a comma-separated list of expressions as the property value.

The min() function method accepts one or more comma-separated expressions as its arguments, and the value of the smallest expression will be used as the specified property value.

/* property: min(expression [, expression]) */
width: min(1vw, 4em, 80px);

In the above example, the width is at most 80px. If the viewport width is less than 800px, or an em width is less than 20px, it will be narrower. In other words, the maximum width is 80px.

Supported Version: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function	Chrome	Edge	Firefox	Safari	Opera
min()	79.0	79.0	75.0	11.1	66.0

CSS Syntax

min(value1, value2, ...)

Value	Description
value1, value2, ...	Required. Comma-separated list of values to select the smallest from.

CSS Functions

❮ Pr Text Text Align Pr Dim Max Height ❯