How to make cornerRadius on Button edges so that edges are not clipped in swiftUI

Question

I am experimenting with SwiftUI. I do not know how to get a rounded button with a borderWidth. Below is the code that I have tried.

Here is my code

struct ArrowButton : View {
    var body: some View {
        return Button(action: {}) {
            HStack {
                Text("SEE ALL")
                    .font(.headline)
                    .color(Color.init(red: 0.627, green: 0.776, blue: 0.965))
                Image(systemName: "arrow.right")
                    .font(Font.title.weight(.bold))
            }
        }
            .padding(.all, 9.0)
            .border(Color.init(red: 0.627, green: 0.776, blue: 0.965))
            .cornerRadius(5.0)
    }
}

And here is how my view looks

What modifiers should i use to

1. Increase the border width?
2. Remove the clipping effect shown below?

Answer 1

The View.border(:width:cornerRadius) method is not available in the final Xcode 11 version but you can achieve the same result by applying both cornerRadius & overlay modifiers:

Button(action: {}) {
    VStack {
        Image(systemName: "star.fill")
        Text("Hello world!")
    }
    .padding()
    .accentColor(Color(.systemRed))
    .background(Color(UIColor.systemRed.withAlphaComponent(0.4)))
    .cornerRadius(4.0)
    .overlay(
        RoundedRectangle(cornerRadius: 4).stroke(Color(.systemRed), lineWidth: 2)
    )
}

Result: