---
title: "ContainerRelativeShape | Explore SwiftUI"
description: "A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle"
canonical_url: "https://exploreswiftui.com/library/shapes/containerrelativeshape"
meta:
  author: "Explore SwiftUI"
  "og:description": "A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle"
  "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_ContainerRelativeShape%2Cdescription_~QSBzaGFwZSB0aGF0IGlzIHJlcGxhY2VkIGJ5IGFuIGluc2V0IHZlcnNpb24gb2YgdGhlIGN1cnJlbnQgY29udGFpbmVyIHNoYXBlLiBJZiBubyBjb250YWluZXIgc2hhcGUgd2FzIGRlZmluZWQsIGlzIHJlcGxhY2VkIGJ5IGEgcmVjdGFuZ2xl%2Ccategory_Shapes%2Cimage_~L2FwaS9pbWFnZXMvOTgvdmFyaWFudHMvMzE4P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L3NoYXBlcy9jb250YWluZXJyZWxhdGl2ZXNoYXBlIg%2Cs_hY4sZhdTIIqtPeyN.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "ContainerRelativeShape | Explore SwiftUI"
  "twitter:description": "A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle"
  "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_ContainerRelativeShape%2Cdescription_~QSBzaGFwZSB0aGF0IGlzIHJlcGxhY2VkIGJ5IGFuIGluc2V0IHZlcnNpb24gb2YgdGhlIGN1cnJlbnQgY29udGFpbmVyIHNoYXBlLiBJZiBubyBjb250YWluZXIgc2hhcGUgd2FzIGRlZmluZWQsIGlzIHJlcGxhY2VkIGJ5IGEgcmVjdGFuZ2xl%2Ccategory_Shapes%2Cimage_~L2FwaS9pbWFnZXMvOTgvdmFyaWFudHMvMzE4P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L3NoYXBlcy9jb250YWluZXJyZWxhdGl2ZXNoYXBlIg%2Cs_hY4sZhdTIIqtPeyN.png"
  "twitter:title": "ContainerRelativeShape | Explore SwiftUI"
---

> Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt)

**Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=98)

# **ContainerRelativeShape**

A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle

![ContainerRelativeShape - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/98/variants/318?v=1790073478842&r=2&w=800&q=80&f=webp)

### **Platform Compatibility**

iOS 14.0+ iPadOS 14.0+ macOS 11.0+ watchOS 7.0+ tvOS 14.0+ visionOS 1.0+

### **Tags**

### **SwiftUI Code**

[ Docs](https://developer.apple.com/documentation/swiftui/containerrelativeshape)

```
VStack {
    Text("Foo")
    VStack {
        Text("Bar")
        Text("Foo")
            .padding()
            .background(ContainerRelativeShape().fill(Color.green))
    }
    .padding()
        .background(ContainerRelativeShape().fill(Color.red))

}
.padding()
    .background(.blue, in: RoundedRectangle(cornerRadius: 40))
```

### **Found an issue or have a suggestion?**

Created: June 12, 2025Updated: December 27, 2025

![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png)

**Connect Wizard**

**Unlock insights App Store Connect doesn’t show you.**

[** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8)

### **Explore Other Components **

[**Browse all **](https://exploreswiftui.com/)

![Toolbar Item Visibility Priority - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/238/variants/733?v=1792389091475&r=2&w=412&q=75&f=webp)

### **Toolbar Item Visibility Priority**

Defines the visibility priority for a toolbar item.

![UIKit Label Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/10/variants/45?v=1790073478842&r=2&w=412&q=75&f=webp)

### **UIKit Label Colors**

![Stepped Min Max Label Slider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/51/variants/396?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Stepped Min Max Label Slider**

Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels

![PalettePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/184/variants/598?v=1790073478842&r=2&w=412&q=75&f=webp)

### **PalettePickerStyle**

A picker style that presents the options as a row of compact elements. When used outside of menus, this style is rendered as a segmented picker. If that is the intended usage, consider segmented instead.

![Button Tint - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/34/variants/408?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Button Tint**

Sets the buttons tint color

![TabView Bottom Accessory Placement - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/90/variants/385?v=1793438761547&r=2&w=412&q=75&f=webp)

### **TabView Bottom Accessory Placement**

A placement of the bottom accessory in a tab view. You can use this to adjust the content of the accessory view based on the placement

![Picker Divider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/177/variants/540?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Picker Divider**

A Picker with a Divider

![Page Screen Sheet Size - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/144/variants/478?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Page Screen Sheet Size**

On devices smaller than a page of paper, such as iPhone, Apple Watch, and 8" or 11" iPads, the sheet fills the entire height and, unlike the default sheet on iPad, the full width. On macOS, .page behaves like .fitted.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/shapes/containerrelativeshape#webpage","@type":"WebPage","dateModified":"2025-12-27T19:26:17.752Z","datePublished":"2025-06-12T16:35:11.684Z","description":"A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle","name":"ContainerRelativeShape","url":"https://exploreswiftui.com/library/shapes/containerrelativeshape","breadcrumb":{"@id":"https://exploreswiftui.com/library/shapes/containerrelativeshape#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/shapes/containerrelativeshape"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/shapes/containerrelativeshape#article","dateModified":"2025-12-27T19:26:17.752Z","datePublished":"2025-06-12T16:35:11.684Z","description":"A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle","headline":"ContainerRelativeShape","inLanguage":"en-US","name":"ContainerRelativeShape","thumbnailUrl":"https://exploreswiftui.com/api/images/98/variants/318?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/shapes/containerrelativeshape","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/shapes/containerrelativeshape#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/shapes/containerrelativeshape#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/containerrelativeshape","codeSampleType":"full example","description":"A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle","name":"ContainerRelativeShape SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"VStack {\n    Text(\"Foo\")\n    VStack {\n        Text(\"Bar\")\n        Text(\"Foo\")\n            .padding()\n            .background(ContainerRelativeShape().fill(Color.green))\n    }\n    .padding()\n        .background(ContainerRelativeShape().fill(Color.red))\n\n}\n.padding()\n    .background(.blue, in: RoundedRectangle(cornerRadius: 40))","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Shapes"},{"@type":"Thing","name":"ContainerRelativeShape"}]},{"@id":"https://exploreswiftui.com/library/shapes/containerrelativeshape#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Shapes","item":"https://exploreswiftui.com/library/shapes","position":2},{"@type":"ListItem","name":"ContainerRelativeShape","item":"https://exploreswiftui.com/library/shapes/containerrelativeshape","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/98/variants/318?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/98/variants/318?v=1790073478842&r=2"}]}
```