Round corners of a border in SwiftUI

In this tutorial, we will see how we can round specific corners of a border in SwiftUI. Borders play a vital role in improving the visual appeal and overall layout of our app, making it more attractive to users. We also will learn how to add borders and then explore the process of rounding the corners of the border.

In SwiftUI, we can easily create rounded corners for a view’s border using the .cornerRadius() modifier. This modifier allows us to give our view a more cool and attractive look. The .cornerRadius() modifier takes a single parameter, which determines the amount of rounding we want for the corners of our view.

Now, have a look at the steps below

Add border

First of all, we have to add border to our SwiftUI view. I always find that using borders really helps to give our views a more polished and organized appearance. They’re great for visually defining the boundaries of the space and creating a more structured look overall. We can add a border by using .border() modifier.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy")
            .padding()
            .border(.mint, width: 5)
    }
}

In the above program, I have used the .border() modifier to add a border around the Text view.

In this case, the border color is.mint, which means it will use the predefined mint color provided by SwiftUI. The width: 5 parameter will set the border width to 5 points.

Output:

Add corner radius

We have to use .cornerRadius() modifier to get the rounded corners effect. Using this modifier we can control the curvature of the corners. By rounding the corners we can make some UI elements more attractive like buttons, images, rectangles, and more.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy")
            .padding(40)
            .border(.mint, width: 5)
            .cornerRadius(10)
    }
}

In the above program, the .cornerRadius( ) modifier will set the corner radius of the Text view to 10, making the corners rounded.

Output:

As you can see in the above output, the outside of the rectangle is rounded and we still have sharp edges inside of the rectangle. This is not looking good as well.

Now, if we want to create a properly-rounded rectangle corner radius, we actually have to use the overlay() modifier. We also have to use a shape within the overlay() modifier.

We also required the stroke modifier in combination with shapes. The stroke() modifier is used to draw the outline of a shape with a specified color and line width. It is typically used with shapes like Rectangles, circles, Ellipse, etc., to define their border.

Have a look at the example below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy")
            .padding(40)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(.mint, lineWidth: 5)
            )
    }
}

In the above program, the overlay() modifier is used to add an additional view on top of the existing view. In this case, the RoundedRectangle view is used as an overlay.

Then, I used the stroke modifier to add a border (stroke) around the RoundedRectangle view.

Output:

Round specific corners of a border

In SwiftUI, we can round specific corners of a border by leveraging the RoundedRectangle and Shape features. This is really useful when we want to create a custom look for our UI elements. By simply adjusting the corner radius values, you can make your buttons, text fields, and other views look more modern and polished. Follow the steps below to round the required corners of a border.

Create a custom struct

First of all, We have to create a new struct called RoundedShape that conforms to the Shape protocol. This struct will define the custom shape that we can use to round specific corners.

//Define a custom SwiftUI Shape called "RoundedCorners".
struct RoundedCorners: Shape {
    //Provide variables to control the radius and which corners to round.
    var radius: CGFloat 
    var corners: UIRectCorner
    
    //Implement the path(in:) method required for the Shape protocol.
    func path(in rect: CGRect) -> Path {
        //Create a UIBezierPath to represent the custom rounded rectangle path.
        let path = UIBezierPath(
            roundedRect: rect,
            byRoundingCorners: corners,
            cornerRadii: CGSize(width: radius, height: radius)
        )
        
        //Convert the UIBezierPath to a SwiftUI Path and return it.
        return Path(path.cgPath)
    }
}

In the above program, I have declared two variables which allow us to customize the shape’s appearance. The variables are:

• radius: Controls how much the corners will be rounded.
• corners: Lets us choose which corners of the shape should be rounded.

Then, the path() function has been used to create a shape with rounded corners inside the given rectangular area (rect).  It uses the radius property to control how rounded the corners should be and the corners property to specify which corners to round.

Modify the ContentView

Now, replace the existing code in the body property of ContentView with the following code to create the user interface.

.overlay(
        //Create a rounded rectangle with a colored outline.
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.mint, lineWidth: 10)
        
            //Use a custom shape to clip (round) specific corners of the rectangle.
            .clipShape(RoundedCorners(radius: 10, corners: [.topLeft, .bottomRight]))
    )

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

Now, Have a look at the complete code below.

import SwiftUI


struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy")
            .padding(40)
            //Overlay the Text view with a custom rounded rectangle.
            .overlay(
                //Create a rounded rectangle with a colored outline.
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.mint, lineWidth: 10)
                
                    //Use a custom shape to clip (round) specific corners of the rectangle.
                    .clipShape(RoundedCorners(radius: 10, corners: [.topLeft, .bottomRight]))
            )
    }
}

//Define a custom SwiftUI Shape called "RoundedCorners".
struct RoundedCorners: Shape {
    //Provide variables to control the radius and which corners to round.
    var radius: CGFloat 
    var corners: UIRectCorner
    
    //Implement the path(in:) method required for the Shape protocol.
    func path(in rect: CGRect) -> Path {
        //Create a UIBezierPath to represent the custom rounded rectangle path.
        let path = UIBezierPath(
            roundedRect: rect,
            byRoundingCorners: corners,
            cornerRadii: CGSize(width: radius, height: radius)
        )
        
        //Convert the UIBezierPath to a SwiftUI Path and return it.
        return Path(path.cgPath)
    }
}

The above code will create a view that will display the text “CodeSpeedy” with a rounded rectangle stroke around it, where only the top-left and bottom-right corners are rounded, and the stroke color is “mint” with a line width of 10 points. The custom RoundedCorners shape gives us the flexibility to round our required corners.

Output: