How to Round the Corners of a View in SwiftUI

In this quick post we are going to look at how we can make views in SwiftUI have rounded corners. You can round the corners of any SwiftUI view by using the cornerRadius() modifier. Simply add a value to the cornerRadius to control how rounded you want the view to be. Let us look at a simple example below.

struct ContentView: View {
    
    @State private var hovering = false
    
    var body: some View {
        Button(action: {}) {
            Text("Button")
        }
        .buttonStyle(PlainButtonStyle())
        .padding()
        .background(Color.green)
        .cornerRadius(10)
    }
}

By adding a cornerRadius of 10 to our button we now get nice rounded corners on our button. This can be used on any view that you want to manipulate the corners to have rounded edges.

Hope this helps in styling your views in SwiftUI!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s