Open In App

CSS env() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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( <custom-ident> , <declaration-value> )

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




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <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>
</head>
 
<body>
    <h2>50px padding from top</h2>
 
    <p>Geeks for geeks</p>
</body>
</html>


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




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <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>
</head>
 
<body>
    <h2>50px padding from right</h2>
    
    <p>Geeks for geeks</p>
</body>
</html>


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




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <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>
</head>
 
<body>
    <h2>50px padding from left</h2>
 
    <p>Geeks for geeks</p>
</body>
</html>


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




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <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>
</head>
 
<body>
    <h2>50px padding from bottom</h2>
     
    <p>Geeks for geeks</p>
</body>
</html>


Output:

Supported browsers:

  • Chrome 69
  • Edge 79
  • Firefox 65
  • Safari 11.1
  • Opera 56


Last Updated : 15 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads