iosswiftswiftui

Button border with corner radius in Swift UI

I'm trying to set a rounded border to a button but the border of the button is not correct.

Code:

Button(action: {
        print("sign up bin tapped")          
}) {
    Text("SIGN UP")
      .frame(minWidth: 0, maxWidth: .infinity)
      .font(.system(size: 18))
      .padding()
      .foregroundColor(.white)
 }
  .border(Color.white, width: 2)
  .cornerRadius(25)

Output:

enter image description here

As you can see the border at corner are cut-off.

Any suggestion what am I doing wrong?

Solution

  • Instead of setting the cornerRadius to the Button use an overlay for the inside View:

    Edit: If you have a background for the button you also need to apply the cornerRadius to the background.

        Button(action: {
        print("sign up bin tapped")
    }) {
        Text("SIGN UP")
            .frame(minWidth: 0, maxWidth: .infinity)
            .font(.system(size: 18))
            .padding()
            .foregroundColor(.white)
            .overlay(
                RoundedRectangle(cornerRadius: 25)
                    .stroke(Color.white, lineWidth: 2)
        )
    }
    .background(Color.yellow) // If you have this
    .cornerRadius(25)         // You also need the cornerRadius here