Uniform Concentric Rectangle

Create a rectangle with the same corner style set on four corners.

Uniform 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 the device frame's corner radius
    ConcentricRectangle(corners: .concentric, isUniform: true)
        .fill(Color.blue)
        .frame(height: 50)
        .frame(maxHeight: .infinity, alignment: .bottom)
        .padding(30)
        .ignoresSafeArea()

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

        // Respects the parent rectangle's corner radius
        ConcentricRectangle(corners: .concentric, isUniform: true)
            .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