Button border with corner radius in Swift UI

Question

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:

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

Any suggestion what am I doing wrong?

Answer 1

Try it like this: 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      

Works for me. Let me know if it helps!

Answer 2

Updated for Swift 5 & iOS 13.4+ with Press States!

None of the examples worked for buttons with both dark and white background colors as well as none of them had press state updates, so I built this LargeButton view that you can see below. Hope this helps, should be pretty simple to use!

Example Photos

Example Use

// White button with green border. LargeButton(title: "Invite a Friend",              backgroundColor: Color.white,              foregroundColor: Color.green) {                         print("Hello World")                     }  // Yellow button without a border LargeButton(title: "Invite a Friend",              backgroundColor: Color.yellow) {                         print("Hello World")                     } 

Code

struct LargeButtonStyle: ButtonStyle {          let backgroundColor: Color     let foregroundColor: Color     let isDisabled: Bool          func makeBody(configuration: Self.Configuration) -> some View {         let currentForegroundColor = isDisabled || configuration.isPressed ? foregroundColor.opacity(0.3) : foregroundColor         return configuration.label             .padding()             .foregroundColor(currentForegroundColor)             .background(isDisabled || configuration.isPressed ? backgroundColor.opacity(0.3) : backgroundColor)             // This is the key part, we are using both an overlay as well as cornerRadius             .cornerRadius(6)             .overlay(                 RoundedRectangle(cornerRadius: 6)                     .stroke(currentForegroundColor, lineWidth: 1)         )             .padding([.top, .bottom], 10)             .font(Font.system(size: 19, weight: .semibold))     } }  struct LargeButton: View {          private static let buttonHorizontalMargins: CGFloat = 20          var backgroundColor: Color     var foregroundColor: Color          private let title: String     private let action: () -> Void          // It would be nice to make this into a binding.     private let disabled: Bool          init(title: String,          disabled: Bool = false,          backgroundColor: Color = Color.green,          foregroundColor: Color = Color.white,          action: @escaping () -> Void) {         self.backgroundColor = backgroundColor         self.foregroundColor = foregroundColor         self.title = title         self.action = action         self.disabled = disabled     }          var body: some View {         HStack {             Spacer(minLength: LargeButton.buttonHorizontalMargins)             Button(action:self.action) {                 Text(self.title)                     .frame(maxWidth:.infinity)             }             .buttonStyle(LargeButtonStyle(backgroundColor: backgroundColor,                                           foregroundColor: foregroundColor,                                           isDisabled: disabled))                 .disabled(self.disabled)             Spacer(minLength: LargeButton.buttonHorizontalMargins)         }         .frame(maxWidth:.infinity)     } }