SwiftUI: Rounded Rectangle Overlay Corners Cut Off

Question

I'm trying to have a consistent-width broder with an overlay, and I keep getting the wrong result. My overlay looks like this:

With this code:

VStack {
    HStack {
        Text("Test")
    }
    HStack {
        Text("test2")
    }
}
.padding()
.frame(width: UIScreen.main.bounds.width*0.95)
.frame(minHeight: 50)
.overlay (
    RoundedRectangle(cornerRadius: 20)
        .stroke(RandomColor(), lineWidth: 3)
)

As you can see the corners are thicker than all other parts of the overlay. How can I fix this?

Answer 1

The thing you are missing is the difference between stroke and strokeBorder, if you changed your code to strokeBorder, it help you.

RoundedRectangle(cornerRadius: 20)
    .strokeBorder(RandomColor(), lineWidth: 3)

Answer 2

The lineWidth makes it stretch beyond its bounds slightly. You can balance this with inset(by:) to keep it inside the original frame:

RoundedRectangle(cornerRadius: 20)
 .inset(by: 3)
 .stroke(RandomColor(), lineWidth: 3)

Note: you may only need to inset by 2 -- haven't done enough experimentation to see what the exact number is