F2.12.1notch and radius clip corner contentdesign

Notch and corner radius clip what you park in the corners

Aliases: notch clipping · rounded-corner clip · Dynamic Island

What it is

The display is no longer a rectangle. Notch, Dynamic Island and corner radii cover pixels that were still drawn as a rectangle. A close control at (8, 8) loses a bite, or sits on the status time; a map pin in a full-bleed corner loses a sector. That is clipping — the content is geometrically there and invisible.

Where fixed chrome sits is a placement problem in another family. This leaf is how a layout system treats missing corners: content coordinates can no longer assume all four corners are live.

Why it happens

The compositor still paints a rectangle; glass and sensor housing then mask the corners and a top capsule. Anything with a corner origin (close, page dots, timestamps, badges) sits on the mask. Safe-area insets exist to give content a still-rectangular inner frame, so glyph and control pixels land where the panel still emits light.

Radius, notch width and notch height vary by device. A rectangular habit like “8 px from the edge” is barely enough on a small radius and slices descenders on a large radius or a capsule. Clipping is missing information, not a slightly ugly corner.

Where it stops holding

Full-screen film and photography may want the image to the glass; what gets clipped is composition, often acceptable. Captions and the scrubber still have to retreat into the inner frame. Desktop windows and old square-corner devices do not clip this way. A fat decorative frame drawn on the physical edge is meant to be cut.

In landscape the notch moves to a side. Yesterday’s “top corner” is now mid-edge. Coordinates that were safe in portrait can hit the island after rotation.

Applying it

  • Position type, icons and controls against the safe-area inner frame, not against window (0, 0). Badges and close controls especially: inset, not 8 px.
  • Full-bleed media may paint to the physical edge; legends, scale bars and close controls that sit on it still follow the inner frame.
  • How to check: screenshot full-bleed pages on a simulator with notch and radius on. Inspect four corners and top centre. Missing glyph pixels, a bitten icon, a control under the island: fail. Repeat in landscape; the island changed sides. Overlay the system safe-area viz (or your own inset mask); failures should sit just outside that mask.

Related

  • Same group: F2.12.2 Do not put tappables in the home-indicator band · F2.12.3 Backgrounds may paint past the safe area; content may not
  • Nearby: F1.12 Fixed chrome and safe area · F1.05 Reachability of edges and corners · F2.02 Columns, gutters and margins
  • Search terms: safe area inset · notch · rounded corner clipping · Dynamic Island

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F2.12.1