title: How can I create an "unfilled frame" in SwiftUI?
body: <p>I'm sure this is something super-simple, but I cannot seem to figure it out. I am trying to create a "widget" that consists of three lines of text, stacked vertically. This information should be placed inside a "frame" or "border" so it resembles a card. There will be a row of these cards that will scroll horizontally.</p>
  
  <p>Believe it or not, the only part of this I cannot figure out is how to draw the border around the widget. I've tried .border, but that snugs the border right up against the text. I know I can add padding, but what I really need is a fixed-size card so each element in the scrolling list is identical.</p>
  
  <p>I've come closest using this:</p>
  
  <pre><code>.frame(width: geometry.size.width/1.3, height: 200)
  .background(Color.white)
  .border(Color.blue)
  .cornerRadius(20)
  </code></pre>
  
  <p>...but the corners are all clipped. For reference, here's the complete code listing:</p>
  
  <pre><code>struct AccountTile: View {
      var body: some View {
          GeometryReader { geometry in
              VStack(alignment: .leading, spacing: 8) {
                  Text("Account Balance").font(.largeTitle)
                  Text("Account Name").font(.headline)
                  HStack(spacing: 0) {
                      Text("There are ").font(.caption).foregroundColor(.gray)
                      Text("6 ").font(.caption).fontWeight(.bold).foregroundColor(.blue)
                      Text("unreconciled transactions.").font(.caption).foregroundColor(.gray)
                  }
              }
              .frame(width: geometry.size.width/1.3, height: 200)
              .background(Color.white)
              .border(Color.blue)
              .cornerRadius(20)
          }
      }
  }
  </code></pre>
  
  <p>...and here's what that code is producing:</p>
  
  <p><a href="https://i.stack.imgur.com/2JXHs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2JXHs.jpg" alt="clipped image"></a></p>
  
  <p>This is <em>almost</em> what I'm looking for - I just need the border to be complete.</p>