Concentric Rectangle

A concentric rectangle whose corner radii are defined from the same circle center as its parent element. The outermost parent is the device frame.

Concentric Rectangle - iOS Liquid Glass Light Mode Preview

Platform Compatibility

iOS 26.0+ iPadOS 26.0+ macOS 26.0+ watchOS 26.0+ tvOS 26.0+ visionOS 26.0+

Tags

SwiftUI Code

Docs 
ZStack(alignment: .bottom) {
            // Respects radius from devide frame
            ConcentricRectangle()
                .fill(Color.blue)
                .frame(height: 50)
                .frame(maxHeight: .infinity, alignment: .bottom)
                .padding(30)
                .ignoresSafeArea()

            ZStack {
                // Gets radius from parent rect
                ConcentricRectangle()
                    .fill(.secondary)

                // Respects radius from parent rect
                ConcentricRectangle()
                    .fill(.red)
                    .frame(width: 200, height: 200)
                    .padding([.trailing, .bottom])
            }
            .containerShape(
                .rect(cornerRadius: 42)
            )
            .frame(width: 250, height: 250)
            .padding(.bottom)
        }

Found an issue or have a suggestion?

Created: February 28, 2026Updated: February 28, 2026