title: SwiftUI Mask a rectangle inside a rounded rectangle
body: <p><a href="https://i.stack.imgur.com/G7SCO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/G7SCO.png" alt="Card"></a></p>
  
  <p>Hello there.  I am wondering, in SwiftUI, how do you mask the contents of a rounded rectangle so that a child rectangle clips the corners.</p>
  
  <p>In my example I have a white rounded rectangle and a pink rectangle on a zstack, I've tried to apply clipping, but the pink rectangle does not conform to the corners.</p>
  
  <p>I've tried applying .mask to the white rectangle, but it gives different results to expectations (sometimes it doesn't show the pink rectangle).</p>
  
  <p>I did find an example where you can set your own cornerRadius 
  <a href="https://stackoverflow.com/questions/56760335/round-specific-corners-swiftui">Round Specific Corners SwiftUI</a></p>
  
  <p>But I was wondering if perhaps there was a way to mask the internals/body of the pink rectangle so that it conforms to the parent's rounded rectangle?</p>
  
  <p>My code follows;</p>
  
  <pre><code>var body: some View {
          GeometryReader { geometry in
  
              Color.gray
                  .edgesIgnoringSafeArea(.top)
                  .overlay(
  
                      ZStack (alignment: .topLeading) {
  
                          RoundedRectangle(cornerRadius: 16,
                                           style: .continuous)
                              .foregroundColor(.white)
                              .shadow(radius: 10)
                               // Tried using .mask here 
  
                          Rectangle()
                              .fill(Color.pink)
                              .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 150, alignment: .top)
                              .clipped()
  
  
                      }
                      .frame(width: 300, height: 450, alignment: .center)
              )
  
          }
          .edgesIgnoringSafeArea(.all)
      }
  </code></pre>
  
  <p>Edit:  To clarify:</p>
  
  <p>The pink rectangle should remain as a rectangle, but clip the top left and right to match the parent white rounded rectangle. </p>