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