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!

3 comments

      1. Thanks Tom. I know and i also tried this ContainerRelativeShape. It works in SwiftUI in the main app ok.
        But when you try this inside a widget extension View

        Image(“camera”)
        .clipShape(ContainerRelativeShape())

        it won’t work.Yet you can create a rounded view around a text or Rectangle in the widget. But it just won’t work on images.

        I wonder how the NewsAppWidget does this. It shows 50×50 sized preview images of news headlines with rounded corners…

Leave a Reply to a3igner Cancel reply