Skip to content
Related Articles

Related Articles

CSS env() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Jul, 2022
View Discussion
Improve Article
Save Article

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:

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:

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:

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:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!