CSS env() Function (original) (raw)

Last Updated : 30 Aug, 2024

The **env() function is used to insert the value of a user agent-defined environment variable into your CSS. It is almost the same as var() in CSS except these values are user-agent-defined rather than user-defined. These variables are globally scoped.

**Syntax:

env( , )

**Note: Please note that env() property values are case-sensitive.

**Property values:

**SAFE-AREA-INSET-TOP: It defines the top of the rectangle from the edge of the viewport.

**Syntax:

env(SAFE-AREA-INSET-TOP,Integer_value****)**

**Example: This example shows the use of the CSS env() Function.

HTML `

<style>
    p {
        background-color: green;
        width: fit-content;
        color: white;
        font-size: 20px;
        border: env(SAFE-AREA-INSET-TOP,
                5px) solid black;
        padding: 10px;
        padding: env(SAFE-AREA-INSET-TOP, 50px) 
                   env(safe-area-inset-right, 50px) 
                   env(safe-area-inset-bottom, 50px) 
                   env(safe-area-inset-left, 50px)
    }
</style>

50px padding from top

<p>Geeks for geeks</p>

**Output:

**SAFE-AREA-INSET-RIGHT: It defines the right of the rectangle from the edge of the viewport.

**Syntax:

env(SAFE-AREA-INSET-RIGHT,Integer_value);

**Example: This example shows the use of the CSS env() Function.

HTML `

<style>
    p {
        background-color: green;
        width: fit-content;
        color: white;
        font-size: 20px;
        border:env(SAFE-AREA-INSET-TOP, 5px) solid black;
        padding: 10px;
        padding: env(safe-area-inset-top, 50px) 
                 env(SAFE-AREA-INSET-RIGHT, 50px) 
                 env(safe-area-inset-bottom, 50px) 
                 env(safe-area-inset-left, 50px)
    }
</style>

50px padding from right

<p>Geeks for geeks</p>

**Output:

**SAFE-AREA-INSET-LEFT: It defines the left of the rectangle from the edge of the viewport.

**Syntax:

env(SAFE-AREA-INSET-LEFT,Integer_value);

**Example: This example shows the use of the CSS env() Function.

HTML `

<style>
    p {
        background-color: green;
        width: fit-content;
        color: white;
        font-size: 20px;
        border:env(SAFE-AREA-INSET-TOP, 5px) solid black;
        padding: 10px;
        padding: env(safe-area-inset-top, 50px) 
                 env(safe-area-inset-bottom, 50px) 
                 env(safe-area-inset-right, 50px) 
                 env(SAFE-AREA-INSET-LEFT, 50px)
    }
</style>

50px padding from left

<p>Geeks for geeks</p>

**Output:

**SAFE-AREA-INSET-BOTTOM: It defines the bottom of the rectangle from the edge of the viewport.

**Syntax:

env(SAFE-AREA-INSET-BOTTOM,Integer_value);

**Example: This example shows the use of the CSS env() Function.

HTML `

<style>
    p {
        background-color: green;
        width: fit-content;
        color: white;
        font-size: 20px;
        border:env(SAFE-AREA-INSET-TOP, 5px) solid black;
        padding: 10px;
        padding: env(safe-area-inset-top, 50px) 
                  env(safe-area-inset-left, 50px) 
                   env(SAFE-AREA-INSET-BOTTOM, 50px) 
                 env(safe-area-inset-right, 50px)
    }
</style>

50px padding from bottom

<p>Geeks for geeks</p>

**Output:

**Supported browsers:

Chrome 69
Edge 79
Firefox 65
Safari 11.1
Opera 56