Skip to content

Updated

Copy page

Corner radius

Corner radius is how round the corners of a surface or control are. Apple and Material round different things by different amounts, so one value rarely suits both.

Copy page

Updated

On this page
  1. In the kit
  2. Names
  3. iOS and Android
  4. In practice
  5. Related

In the kit

Where it appears in Appetite UI: Finance app, Pay. The theme switch shows the dark frame.

Pay393 x 852 each, Light and Dark
Finance app Pay sheet: Send money to Amara Diallo with a Pay and Receive switch, an amount of $450.80, a QR code and Share and Save QR buttonsFinance app Pay sheet in dark mode: Send money to Amara Diallo with a Pay and Receive switch, an amount of $450.80, a QR code and Share and Save QR buttons
Pay

What does each system call it?

The same idea under its Apple, Material 3 and Appetite UI name.

Names, system, name
SystemName
AppleCorner radius
Material 3Shape, corner tokens
Appetite UIplatform/*/corner and the radius scale

What value does it take on iOS and Android?

Read from the kit’s Platform collection and its Material 3 pages, as the docs print them.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/control/corner8Full (9999)
platform/sheet/corner1228
platform/dialog/corner1228
platform/card/corner1212

In practice

Material 3 makes buttons fully round and sheets and dialogs round at 28; the iOS mode of the kit keeps controls at 8 and sheets at 12.

Appetite UI holds both answers as Platform variables: platform/control/corner is 8 on iOS and fully round on Android, platform/sheet/corner and platform/dialog/corner 12 against 28, and platform/card/corner 12 on both.