Guide
Safe areas explained for modern devices
Learn how notches, home indicators and insets affect your layout and how to handle them with CSS.
"Safe Area" sounds like a construction zone term, but in UI design, it’s just the habitable zone of a screen.
The Notch Era
Before notches and curved corners, screens were rectangles. You could use 100% of the space. Now, if you put a button in the absolute top-left corner, it might disappear behind a camera cutout or get cut off by a rounded bezel.
The solution: Environment Variables
Browsers give us magic CSS variables to handle this:env(safe-area-inset-top), env(safe-area-inset-bottom), etc.
When you use these in your padding, your content automatically pushes inward just enough to clear the obstruction.
Best Practices
- Backgrounds go to the edge: Let your background colors or images bleed into the unsafe area. It looks premium.
- Content stays safe: Only apply the safe area insets to the container holding your text and buttons.