CSS baseline
Regular border-radius
€128K
Projected 2026
Browser-native rounded rectangle. The curvature turns harder near each straight edge.
Granola follow-up · Johan UI design review · May 12
Normal corners vs iOS smooth corners
A quick Cloudflare Pages probe for the property owner app design language: black/white cards, mobile-first shapes, and the “iOS-style” corner smoothing discussed in the latest meeting.
iOS mask
Smooth squircle mask
€128K
Projected 2026
Same dimensions and radius, but the corner path uses two cubic curves like react-ios-corners.
Owner app home
Mobile-first card stack
2026 forecast
€128,400
RBO AI thumb-zone card
Occ.82%
ADR€167
Implementation notes
What this proves
- Works in current Chromium/Safari via SVG data-URI masks and
-webkit-mask-image. - For production React, we can use the old package’s math or a small internal utility.
- Real box shadows need a wrapper, because CSS masks clip shadows on the masked element.
- Good fit for cards, buttons, app icons, and KPI chips. Use sparingly for complex bordered layouts.
Corner anatomy
The difference is at the transition into the straight edge
The smooth version leaves the straight edge more gradually. Drag the controls above and watch the corner preview change.
normal