concentricCornerRadii
The concentric corner radii for this view’s bounds relative to the container shape.
Declaration
var concentricCornerRadii: RectangleCornerRadii? { get }Return Value
The resolved corner radii, or nil if no container shape is set or the shape does not provide sufficient corner info.
Discussion
Concentric corners share the same center point as the container’s corners, creating visually harmonious nested rounded rectangles. The radius for each corner is calculated as the container’s corner radius minus the distance from this view’s corner to the container’s corner.
Unlike ConcentricRectangle, which calculates and draws the shape, this property only returns the calculated radii. This allows you to use the values for custom drawing, animations, or other purposes:
GeometryReader { geometry in
Canvas { context, size in
if let radii = geometry.concentricCornerRadii {
let path = Path(
roundedRect: CGRect(origin: .zero, size: size),
cornerRadii: radii
)
context.fill(path, with: .color(.blue))
}
}
}
.containerShape(.rect(cornerRadius: 48))Each corner’s radius depends on its position relative to the container:
Corners aligned with the container’s corners get concentric radii
Corners far from the container’s corners get zero radii
The radius is clamped to the view’s maximum possible radius