IT lexicon › Web › Safe area

Safe area

Web På svenska → Updated: 2026-07-31

The part of the screen guaranteed not to be obscured by a notch, rounded corners or the system's own elements.

The concept became necessary once screens stopped being rectangles. iOS 11 introduced safeAreaLayoutGuide, and on the web there are corresponding CSS variables such as env(safe-area-inset-bottom). Content meant to be tapped goes inside it, while backgrounds may happily extend beyond to fill the screen.

Miss this and buttons end up under the home indicator or in a rounded corner where they are hard to hit. The area also varies with orientation and device, so it must be read at runtime rather than hard-coded — one of the most common beginner mistakes in mobile layout.

← Back to the lexicon