CSS env() Function

A phone screen is not always a clean rectangle. Many phones have rounded corners, a camera cutout at the top, and a home indicator bar at the bottom, drawn on top of whatever the page shows there. The part of the screen where nothing covers the page is called the safe area. The distance from each edge of the screen to the safe area is a safe area inset.

The browser knows these distances, and the env() function reads them. env() returns the value of an environment variable: a value that the browser or device sets, not the page. The four you will use most are