Change background color of Rounded Corner Border Button in SwiftUI

In this tutorial, we will see how to change the background color of the Rounded Corner Border Button in SwiftUI.

We can simply create a rounded corner button with a border using a combination of modifiers in SwiftUI. But it is not that easy to apply a background color to this button along with the border.

We can’t use both the .fill and .stroke modifiers together on the same RoundedRectangle shape.

Using the overlay modifier

We can use the overlay modifier to place a view on top of another view. We are using this to draw a border on top of our background color.

We commonly use the overlay modifier to add borders, shadows, or other decorative elements on the top of our existing view.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button {
            // Button action goes here
            
        } label: {
            Text("Press the Button")
                .padding()
            
                // Set the background of the button to a RoundedRectangle with a corner radius of 20.
                .background(
                    RoundedRectangle(cornerRadius: 20)
                    
                        // Fill the RoundedRectangle with the color mint.
                        .fill(.mint)
                )
            
                // Overlay another RoundedRectangle on top of the background.
                .overlay {
                    RoundedRectangle(cornerRadius: 20)
                    
                        // Stroke the RoundedRectangle with a black color and a line width of 3 points.
                        .stroke(.black, lineWidth: 3)
                }
        }
    }
}

In the above code, within the background() modifier, I have used a RoundedRectangle view and applied the fill() modifier to the RoundedRectangle view to specify a background color.

Then, I have used the overlay modifier, and within this modifier, I have created another RoundedRectangle to place it on top of our background. Here, I have used the stroke() modifier on this RoundedRectangle to define the border color and width.

Output:

We can also achieve this by passing our preferred background color within the background modifier instead of the RoundedRectangle shape or any other shapes.

Example

import SwiftUI

struct ContentView: View {
   

    var body: some View {
        Button(action: {
            // Button action
        }) {
            Text("Press the Button")
                .padding()
                .foregroundColor(.white)
                .background(.brown) // Set the background color
                .cornerRadius(10) // Adjust the corner radius as needed
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.black, lineWidth: 2) // Change the border color and width as needed
                )
        }
    }
}

The corner radius of the RoundedRectangle should be the same as specified in the cornerRadius() modifier.

Output:

Using ZStack

We can also use the ZStack to layer views on top of each other similar to the overlay modifier. The ZStack is a layout container that overlays its children views.

We will use this within the background() modifier to draw the background color and then overlay the border.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button {
            // Button action goes here
            
        } label: {
            Text("Press the Button")
                .padding()
                .foregroundColor(.white)
                
                .background(
                    ZStack {
                        // To set the background of the button
                        RoundedRectangle(cornerRadius: 20)
                            .fill(.gray)
                        // To add a black border to the button
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(.mint, lineWidth: 3)
                    }
                )
        }
    }
}

In the above code, within the ZStack I have created two RoundedRectangle shapes, each with a corner radius of 20. I have applied the fill() modifier with the color gray to the first shape, this will add a gray background to the button.

Then, I applied the stroke() modifier with the mint color and a line width of 3 points, it will add a mint-colored border with a line width of 3 around the view.

Output: