Designing Around the Notch

Keeping layouts usable on devices with notches, camera cut-outs, and rounded screen corners.

Content tagged notch

• Tutorial:Padding Around the Notch with env()

  Pad fixed UI around notches with env().

  The env() CSS function reads environment variables the browser defines outside your stylesheet — most commonly the four safe-area-inset-* values — letting fixed/sticky content pad itself around a device's notch, home indicator, or rounded corners without hardcoding per-device pixel values.