# ConcentricRectangle A shape whose corners you configure, individually or uniformly, to be squared, rounded, or concentric relative to a container shape’s corners. ``` struct ConcentricRectangle ``` ## Overview Use `ConcentricRectangle` to create a rectangular shape that fits inside a container’s shape, similar to the way that a sheet’s corners in iOS match the curvature of the screen. System-provided elements like sheets and popovers do this automatically. You can use this effect for your custom views to match a device’s curved edges, or for your custom views near the edges inside another view with concentric corners. For example, the Notes app format sheet has rounded bottom corners that are concentric relative to the device’s corners, and rounded top corners that have a fixed radius.  A rounded corner of a rectangle is *concentric* relative to the container shape’s adjacent corner when the corner’s radius shares a common center with the containing shape’s rounded corner radius. A containing shape could be a view that extends to the device’s rounded corners, or any view that sets [`containerShape(_:)`](/documentation/SwiftUI/View/containerShape(_:)-3br47). `ConcentricRectangle` automatically calculates each corner’s radius relative to the container shape, so your view adapts correctly across devices and sizes without hard-coded values.  ### Create a concentric rectangle Create a `ConcentricRectangle` by specifying corner styles that reflect the types of corners you want, with an initializer or static [`Shape`](/documentation/SwiftUI/Shape) convenience method that specifies how to shape each corner. By default, `ConcentricRectangle`’s [`init()`](/documentation/SwiftUI/ConcentricRectangle/init()) creates a shape where each corner is individually concentric with the container shape: **Code:** ```swift ConcentricRectangle() .fill(Color.green) .padding(8.0) .ignoresSafeArea() .frame(height: 240.0) ``` **Preview:**  When your `ConcentricRectangle`‘s corners are far away from the containing shape’s corners, such as the top corners in this example, the corner radius the system calculates may be zero. When that happens, the corner is square. It’s also possible that your app is running on a device whose corners are square. To ensure that your view always has rounded corners that are concentric relative to the container shape when they can be, use [`concentric(minimum:)`](/documentation/SwiftUI/Edge/Corner/Style/concentric(minimum:)) to specify a rounded corner with a minimum radius. SwiftUI provides container shapes by default in system-provided views. To allow `ConcentricRectangle` to resolve corner radii based on concentricity in your custom view, use [`containerShape(_:)`](/documentation/SwiftUI/View/containerShape(_:)-3br47) to specify a container shape that implements [`RoundedRectangularShape`](/documentation/SwiftUI/RoundedRectangularShape), such as [`Circle`](/documentation/SwiftUI/Circle), [`Rectangle`](/documentation/SwiftUI/Rectangle), [`RoundedRectangle`](/documentation/SwiftUI/RoundedRectangle), or [`Capsule`](/documentation/SwiftUI/Capsule). When the container shape does not conform to [`RoundedRectangularShape`](/documentation/SwiftUI/RoundedRectangularShape), `ConcentricRectangle` provides an inset version of the container shape like [`ContainerRelativeShape`](/documentation/SwiftUI/ContainerRelativeShape). ### Customize corners Select corner styles from the [`Edge.Corner.Style`](/documentation/SwiftUI/Edge/Corner/Style) enumeration to form the following types of corners: - A rounded corner with a radius that’s concentric relative to the containing view - A rounded corner with a radius that’s concentric relative to the containing view, constrained with a minimum radius - A rounded corner with a fixed radius - A squared corner The following example shows one concentric rectangle with each type of corner: **Code:** ```swift ConcentricRectangle( topLeadingCorner: .concentric(minimum: 12.0), topTrailingCorner: .fixed(24.0), bottomLeadingCorner: .concentric, bottomTrailingCorner: .fixed(0.0) ) .fill(Color.green) .padding(24.0) .ignoresSafeArea() .frame(height: 240.0) ``` **Preview:**  ### Create uniform corners To create a shape similar to the Notes app format sheet, create a `ConcentricRectangle` that specifies uniform top corners with a fixed radius and concentric uniform bottom corners. The functions with uniform corner styles calculate each uniform corner’s radius first, then use the largest radius for each uniform corner: **Code:** ```swift ConcentricRectangle( uniformTopCorners: .fixed(24.0), uniformBottomCorners: .concentric ) .fill(Color.green) .padding(8.0) .ignoresSafeArea() .frame(height: 240.0) ``` **Preview:**  Use initializers with uniform parameters to fit your concentric rectangle inside the containing view, depending on which corners need concentricity: - All corners - Leading corners only - Trailing corners only - Leading and trailing corners separately - Top corners only - Bottom corners only - Top and bottom corners separately ## Topics ### Creating a default concentric rectangle [`init()`](/documentation/SwiftUI/ConcentricRectangle/init()) Creates a rectangle using the concentric corner style on each corner individually. ### Creating a rectangle with the same corner style [`init(corners:isUniform:)`](/documentation/SwiftUI/ConcentricRectangle/init(corners:isUniform:)) Creates a rectangle with the same corner style set on four corners. [`rect(corners:isUniform:)`](/documentation/SwiftUI/Shape/rect(corners:isUniform:)) Creates a rectangle with the same corner style set on four corners. ### Creating a rectangle with individual corner styles [`init(topLeadingCorner:topTrailingCorner:bottomLeadingCorner:bottomTrailingCorner:)`](/documentation/SwiftUI/ConcentricRectangle/init(topLeadingCorner:topTrailingCorner:bottomLeadingCorner:bottomTrailingCorner:)) Creates a rectangle with individual corner styles on all four corners. [`rect(topLeadingCorner:topTrailingCorner:bottomLeadingCorner:bottomTrailingCorner:)`](/documentation/SwiftUI/Shape/rect(topLeadingCorner:topTrailingCorner:bottomLeadingCorner:bottomTrailingCorner:)) Creates a rectangle with individual styles for each corner. ### Creating a rectangle with uniform bottom corners [`init(uniformBottomCorners:topLeadingCorner:topTrailingCorner:)`](/documentation/SwiftUI/ConcentricRectangle/init(uniformBottomCorners:topLeadingCorner:topTrailingCorner:)) Creates a rectangle with a corner style set on the bottom two corners uniformly, and two other styles for the top two corners respectively. [`rect(uniformBottomCorners:topLeadingCorner:topTrailingCorner:)`](/documentation/SwiftUI/Shape/rect(uniformBottomCorners:topLeadingCorner:topTrailingCorner:)) Creates a rectangle with a corner style set on the two bottom corners uniformly, and two other styles for the two top corners respectively. ### Creating a rectangle with uniform leading corners [`init(uniformLeadingCorners:topTrailingCorner:bottomTrailingCorner:)`](/documentation/SwiftUI/ConcentricRectangle/init(uniformLeadingCorners:topTrailingCorner:bottomTrailingCorner:)) Creates a rectangle with a corner style set on the leading two corners uniformly, and two other styles for the trailing two corners respectively. [`rect(uniformLeadingCorners:topTrailingCorner:bottomTrailingCorner:)`](/documentation/SwiftUI/Shape/rect(uniformLeadingCorners:topTrailingCorner:bottomTrailingCorner:)) Creates a rectangle with a corner style uniformly set on the two leading corners, and two other styles for the two trailing corners respectively. ### Creating a rectangle with uniform leading and trailing corners [`init(uniformLeadingCorners:uniformTrailingCorners:)`](/documentation/SwiftUI/ConcentricRectangle/init(uniformLeadingCorners:uniformTrailingCorners:)) Creates a rectangle with a corner style set on the leading two corners uniformly, and another style set on the trailing two corners uniformly. [`rect(uniformLeadingCorners:uniformTrailingCorners:)`](/documentation/SwiftUI/Shape/rect(uniformLeadingCorners:uniformTrailingCorners:)) Creates a rectangle with a corner style uniformly set on the two leading corners, and another style uniformly set on the two trailing corners. ### Creating a rectangle with uniform top corners [`init(uniformTopCorners:bottomLeadingCorner:bottomTrailingCorner:)`](/documentation/SwiftUI/ConcentricRectangle/init(uniformTopCorners:bottomLeadingCorner:bottomTrailingCorner:)) Creates a rectangle with a corner style set on the top two corners uniformly, and two other styles for the bottom two corners respectively. [`rect(uniformTopCorners:bottomLeadingCorner:bottomTrailingCorner:)`](/documentation/SwiftUI/Shape/rect(uniformTopCorners:bottomLeadingCorner:bottomTrailingCorner:)) Creates a rectangle with a corner style uniformly set on the two top corners, and two other styles for the bottom two corners respectively. ### Creating a rectangle with uniform top and uniform bottom corners [`init(uniformTopCorners:uniformBottomCorners:)`](/documentation/SwiftUI/ConcentricRectangle/init(uniformTopCorners:uniformBottomCorners:)) Creates a rectangle with a corner style set on the top two corners uniformly, and another style set on the bottom two corners uniformly. [`rect(uniformTopCorners:uniformBottomCorners:)`](/documentation/SwiftUI/Shape/rect(uniformTopCorners:uniformBottomCorners:)) Creates a rectangle with a corner style uniformly set on the two top corners, and another style uniformly set on the two bottom corners. ### Creating a rectangle with uniform trailing corners [`init(uniformTrailingCorners:topLeadingCorner:bottomLeadingCorner:)`](/documentation/SwiftUI/ConcentricRectangle/init(uniformTrailingCorners:topLeadingCorner:bottomLeadingCorner:)) Creates a rectangle with a corner style set on the trailing two corners uniformly, and two other styles for the leading two corners respectively. [`rect(uniformTrailingCorners:topLeadingCorner:bottomLeadingCorner:)`](/documentation/SwiftUI/Shape/rect(uniformTrailingCorners:topLeadingCorner:bottomLeadingCorner:)) Creates a rectangle with a corner style uniformly set on the two trailing corners, and two other styles for the two leading corners respectively. ## See Also [`ContainerRelativeShape`](/documentation/SwiftUI/ContainerRelativeShape) A shape whose dimensions the system calculates from an inset version of the current container shape. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)