Introducing ConcentricRectangle: Automatic Inner Corner Radius in iOS 26

Starting with iOS 26, developers no longer need to manually manage or calculate the corner radius for inner rectangles nested within a rounded rectangle. At WWDC 2025, Apple introduced a powerful new shape called ConcentricRectangle, which automatically inherits the corner radius from its parent — ensuring a seamless and cohesive UI appearance.

To leverage this feature, you simply specify the container’s shape using the containerShape modifier. This sets the shape of the outer container, allowing the ConcentricRectangle shape to automatically compute the appropriate inner corner radius for nested rectangles.

Let’s explore this with a practical example. First, we’ll demonstrate the problem by creating a view that stacks two rectangles inside a ZStack—showing the challenge of managing inner corner radii manually.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                ZStack {
                    RoundedRectangle(cornerRadius: 40)
                        .foregroundStyle(Color.blue.gradient)
                    
                    RoundedRectangle(cornerRadius: 40)
                        .foregroundStyle(Color.orange.gradient)
                        .padding()
                }
                .frame(height: 400)
            }
            .padding()
            .navigationTitle("ConcentricRectangle: DevTechie.com")
        }
    }
}

#Preview {
    ContentView()
}

Notice how the corners appear slightly misaligned or uneven.

This issue becomes even more noticeable as the corner radius increases. To better observe this effect, let’s add a slider control that allows us to dynamically adjust the corner radius.

struct ContentView: View {
    @State private var cornerRadiusVal: CGFloat = 40.0
    var body: some View {
        NavigationStack {
            VStack {
                ZStack {
                    RoundedRectangle(cornerRadius: cornerRadiusVal)
                        .foregroundStyle(Color.blue.gradient)
                    
                    RoundedRectangle(cornerRadius: cornerRadiusVal)
                        .foregroundStyle(Color.orange.gradient)
                        .padding()
                }
                .frame(height: 400)
                
                Slider(value: $cornerRadiusVal, in: 0...100)
            }
            .padding()
            .navigationTitle("DevTechie.com")
        }
    }
}

Let’s change few things. Replace “RoundedRectangle” with “ConcentricRectangle”

struct ContentView: View {
    @State private var cornerRadiusVal: CGFloat = 40.0
    var body: some View {
        NavigationStack {
            VStack {
                ZStack {
                    ConcentricRectangle()
                        .foregroundStyle(Color.blue.gradient)
                    
                    ConcentricRectangle()
                        .foregroundStyle(Color.orange.gradient)
                        .padding()
                }
                .frame(height: 400)
                
                Slider(value: $cornerRadiusVal, in: 0...100)
            }
            .padding()
            .navigationTitle("DevTechie.com")
        }
    }
}

The concentricRectangle modifier doesn’t accept any parameters, so we cannot directly set the corner radius on it. Because of this, it can’t shape the corners on its own. Instead, we use the containerShape modifier on the parent container to define the shape, enabling the inner rectangles to automatically adopt the appropriate corner radius.

struct ContentView: View {
    @State private var cornerRadiusVal: CGFloat = 40.0
    var body: some View {
        NavigationStack {
            VStack {
                ZStack {
                    ConcentricRectangle()
                        .foregroundStyle(Color.blue.gradient)
                    
                    ConcentricRectangle()
                        .foregroundStyle(Color.orange.gradient)
                        .padding()
                }
                .frame(height: 400)
                .containerShape(.rect(cornerRadius: cornerRadiusVal))
                
                Slider(value: $cornerRadiusVal, in: 0...100)
            }
            .padding()
            .navigationTitle("DevTechie.com")
        }
    }
}

We can use the ConcentricRectangle and containerShape with other built-in shapes as well. 

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    ZStack {
                        ConcentricRectangle()
                            .foregroundStyle(Color.blue.gradient)
                        
                        ConcentricRectangle()
                            .foregroundStyle(Color.orange.gradient)
                            .padding()
                    }
                    .frame(height: 200)
                    .containerShape(.rect(cornerRadius: 40))
                    
                    ZStack {
                        ConcentricRectangle()
                            .foregroundStyle(Color.blue.gradient)
                        
                        ConcentricRectangle()
                            .foregroundStyle(Color.orange.gradient)
                            .padding()
                    }
                    .frame(height: 200)
                    .containerShape(.capsule(style: .continuous))
                    
                    ZStack {
                        ConcentricRectangle()
                            .foregroundStyle(Color.blue.gradient)
                        
                        ConcentricRectangle()
                            .foregroundStyle(Color.orange.gradient)
                            .padding()
                    }
                    .frame(width: 200, height: 200)
                    .containerShape(.circle)
                    
                }
                .padding()
            }
            .navigationTitle("DevTechie.com")
        }
    }
}

Visit us at https://www.devtechie.com for more