What is Safe Area?

Safe area refers to regions of the screen not obscured by notches, rounded corners, or system UI.

When to account for Safe Areas?

Safe areas should be considered when designing full‑bleed layouts on modern phones and tablets.

What is the anatomy of Safe Areas?

The anatomy of safe areas includes iOS safe‑area insets and Android cutouts, CSS env(safe-area-inset-*), and insets for headers, footers, and interactive edges.