SwiftUI Clip Shape and Smooth Corners

In SwiftUI, it is possible to clip the shape of a view using various shapes like Circle, Capsule, Rectangle, and more. Additionally, it is possible to apply smooth corners to the view using the cornerRadius modifier. This can be useful when creating a unique design for your app's user interface.

SwiftUI lets you mask any view with a clipShape modifier. A popular technique is to apply the Super Ellipse, also known as continuous rounded corners. 

How to create a continuous corner radius, also known as super ellipse

Card with Rounded Corners  

Let's start with a simple layout with a card and a background.

ZStack {
    Color.blue.ignoresSafeArea()

    VStack {
        Text("Swift UI IO.com")
            .bold()
    }
    .frame(width: 300, height: 200)
    .background(Color.white)
}

..

Clip Shape Circle  

You can use the clipShape to mask your content to any shape, like a Circle or Capsule.

.clipShape(Circle())

..

Corner Radius Style Continuous  

To apply the continuous rounded corners that is used everywhere in iOS, use the RoundedRectangle shape.

.clipShape(RoundedRectangle(cornerRadius: 25, style: .continuous))

..

Final Output:

ZStack {
            LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)), Color(#colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1))]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            VStack {
                Text("Swift UI IO.com")
                    .bold()
            }
            .frame(width: 300, height: 200)
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
        }

..

..