A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/css/css-min-function/ below:

CSS min() Function - GeeksforGeeks

CSS min() Function

Last Updated : 15 Jul, 2025

min() function in CSS is used to extract the minimum value from a set of comma-separated values. It can take two parameters and a min function can be used inside another min function if the comparison is to be made between multiple values.

Syntax:

min(value1, value2);
min(value1, min(value2, min(value3, value4)));

Parameters: It takes the following parameters.

Returns: This function returns the smallest value from a set of comma-separated values.

Below given are a few examples of the above function.

Example 1:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* CSS for the html */
    * {
        font-family: 'Times New Roman', Times, serif;
        font-size: 20px;
        font-stretch: narrower;
        font-weight: 600;
    }

    .box {
        display: flex;
        color: white;
        background-color: green;
        justify-content: center;
        height: min(200px, 500px);
        width: min(200px, 500px);
    }

    h2 {
        align-self: center;
    }
</style>

<body>
    When nested min function is not used
    <div class="box">
        <h2>Geeks for geeks</h2>
    </div>
</body>

</html>

Output:

Example 2:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* CSS for the html */
    * {
        font-family: 'Times New Roman', Times, serif;
        font-size: min(20px, 1000px);
        font-stretch: narrower;
        font-weight: 600;
    }

    .box {
        display: flex;
        color: white;
        background-color: green;
        justify-content: center;
        height: min(20vh, min(30vh, min(40vh, 50vh)));
        width: min(50vw, min(50vw, min(40vw, 50vw)));
    }

    h2 {
        align-self: center;
    }
</style>

<body>
    When nested min function is
    used with different units
    <div class="box">
        <h2>Geeks for geeks</h2>
    </div>
</body>

</html>

Output:

Browsers supported:



RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4