Round specific corners in SwiftUI

In this tutorial, we will see how we can round specific corners in SwiftUI. We can create soft edges, and unique shapes, or focus attention on certain parts of the interface by rounding specific corners of a view.

Now have a look at the example below.

import SwiftUI

struct ContentView: View {
    var body: some View {
       Text("CodeSpeedy")
            .font(.largeTitle)
            .foregroundColor(Color.white)
            .padding()
            .background(Color.mint)
            .cornerRadius(15)
    }
}

In the above program, I have used cornerRadius modifier to round the corners of the view.

Output:

As you can see in the above output, it rounded every corner of the shape that’s pretty cool. But we want to make specific corners rounded not every corner.

Now, we will explore how we can round specific corners as per our requirements in SwiftUI.

Add an Extension to View

First of all, we have to add an extension to the View protocol. In this case, we may use extensions to add new functionality to existing types in the SwiftUI View.

// Creating an extension for the View type in SwiftUI
extension View {
    // Function to add rounded corners to any SwiftUI view
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        // Using the clipShape modifier to apply the rounded corner shape
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    }
}

In the above extension, I have defined a new method called cornerRadius that takes two parameters which are radius and corners. This method returns a modified View (using the some View return type).

Define a RoundedCorner View

Now, we have to define a new Shape called RoundedCorner (You can name the shape whatever you want). Shapes in SwiftUI define the outline of a view or a drawing. This shape allows us to round the specific corners.

// Custom Shape to draw rounded corners for specified corners of a rectangle
struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    // Creating a UIBezierPath to draw the rounded corner shape
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        // Converting the UIBezierPath to a SwiftUI Path
        return Path(path.cgPath)
    }
}

In the above program, the RoundedCorner shape takes two properties which are mentioned below.

• The radius property represents the corner radius value, and by default, it is set to .infinity.
• The corners property represents which corners should be rounded, and by default, it rounds all corners.

Then, the path(in:) function generates a Path that represents the shape of the RoundedCorner. In this case, we use a UIBezierPath to create a rounded rectangle with the specified corner radius and corners.

Apply the cornerRadius function

Now in the ContentView, we have to apply the cornerRadius function that we defined in the extension. Just insert the below code into the ContentView.

.cornerRadius(20, corners: [.bottomLeft, .topRight])

The above code will round the bottom-left and top-right corners. The radius of the corners is set to 20 points.

Now, have a look at the complete code below.

// Importing SwiftUI framework
import SwiftUI

// Defining our main content view
struct ContentView: View {
    var body: some View {
       // Displaying the text "CodeSpeedy" with a large font size
       Text("CodeSpeedy")
            .font(.largeTitle)
            .foregroundColor(Color.white)
            .padding()
            .background(Color.mint)
            // Applying a rounded corner effect to the background
            .cornerRadius(20, corners: [.bottomLeft, .topRight])
    }
}

// Creating an extension for the View type in SwiftUI
extension View {
    // Function to add rounded corners to any SwiftUI view
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        // Using the clipShape modifier to apply the rounded corner shape
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    }
}
// Custom Shape to draw rounded corners for specified corners of a rectangle
struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    // Creating a UIBezierPath to draw the rounded corner shape
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        // Converting the UIBezierPath to a SwiftUI Path
        return Path(path.cgPath)
    }
}

The above program will display a Text element with the text “CodeSpeedy” in a mint-coloured box with rounded corners on the bottom-left and top-right edges.

Output: