How to Round the Corners of a View in SwiftUI

April 10, 2020 By Thomas Prezioso Jr 1 min read

---

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!

---

Share this post

Post on X Share on LinkedIn