How to Create a Rounded Corners View in SwiftUI

May 21, 2025

There are many ways to create a view with rounded corners in SwiftUI. Let’s look at all the ways to round the edges of a view, so you can choose the one you like best.

Table of Contents

Rounded Corners Using the CornerRadius Modifier

You can create rounded corners using the CornerRadius modifier.

In the following example:

Label("WiFi", systemImage: "wifi")
            .padding()
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(10)

The result would be the following:

We use the cornerRadius modifier, available from iOS 13 onward, to create rounded corners.

Rounded Corners Using the clipShape Modifier

We can also create rounded corners in SwiftUI using the clipShape modifier. This modifier will clip the modified view to a specific shape.

SwiftUI has many built-in shapes that can produce rounded corners, for example, RoundedRectangle and Capsule.

In the following example, we create rounded corners with these built-in shapes.

VStack {
            Label("WiFi", systemImage: "wifi")
                .padding()
                .foregroundColor(.white)
                .background(.blue)
                .clipShape(

                    RoundedRectangle(
                        cornerRadius: 10
                    )
                )
            
            Label("WiFi", systemImage: "wifi")
                .padding()
                .foregroundColor(.white)
                .background(.blue)
                .clipShape(

                    Capsule()
                )
            
            Label("WiFi", systemImage: "wifi")
                .padding()
                .foregroundColor(.white)
                .background(.blue)
                .clipShape(

                    RoundedRectangle(
                        cornerRadius: 20,
                        style: .continuous
                    )
                )
        }

In Xcode the result would be the following:

Rounded Corners Using the Background Modifier

In this last method, we create rounded corners using the background modifier.

In the following example, we create a background view using the same shape we used with clipShape and apply its color using the fill modifier.

VStack {
            Label("WiFi", systemImage: "wifi")
                .padding()
                .foregroundColor(.white)
                .background(
                    RoundedRectangle(cornerRadius: 8)

                        .fill(.blue)
                )
            
            Label("WiFi", systemImage: "wifi")
                .padding()
                .foregroundColor(.white)
                .background(
                    Capsule()

                        .fill(.blue)
                )
            
            Label("WiFi", systemImage: "wifi")
                .padding()
                .foregroundColor(.white)
                .background(
                    RoundedRectangle(

                        cornerRadius: 20,
                        style: .continuous
                    )
                    .fill(.blue)
                )
        }

Which in Xcode would give the following result:

Since iOS 15, the background modifier has received an update that makes creating rounded corners much easier. The new background modifier allows us to specify both the color and shape of the background.

So, we don’t need to specify the clipShape or fill modifier when using the background modifier.

This example shows it:

VStack {
    Label("Bookmark", systemImage: "bookmark.fill")
        .padding()
        .foregroundColor(.white)
        .background(
            .pink,
            in: RoundedRectangle(cornerRadius: 8)

        )
    
    Label("Bookmark", systemImage: "bookmark.fill")
        .padding()
        .foregroundColor(.white)
        .background(
            .pink,
            in: Capsule()

        )
    
    Label("Bookmark", systemImage: "bookmark.fill")
        .padding()
        .foregroundColor(.white)
        .background(
            .pink,
            in: RoundedRectangle(

                cornerRadius: 20,
                style: .continuous
            )
        )
}