Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS env() Function

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like 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: 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

My Personal Notes arrow_drop_up
Last Updated : 15 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials