SwiftUI Tip: Drawing a Border with Rounded Corners for Buttons and Text

With SwiftUI, you can easily draw a border around a button or text (and it actually works for all views) using the border modifier. Say, for example, you want to create a button like this:


Editor’s note: This tutorial has been tested on Xcode 11 beta 6.

We can apply the border modifier on a button object to create a button with a coloured border:

But what if your designer wants you to create a rounded border button like this? How can you do that?

rounded border button - swiftui

Before the release of Xcode 11 beta 6, you can use the border modifier and pass it with the corner radius:

However, the latest beta of Xcode 11 has deprecated the function call. To create a border with rounded corners, you can draw a rounded rectangle and overlay on the button like this:

In the code, we use a RoundedRectangle and its stroke modifier to create the rounded border. You can modify the color and line width to adjust its appearance.

To create a button with different styles, you can just use another shape object to draw the border. Say, you can replace the RoundedRectangle with Capsule to create a border like this:

By specifying your own StrokeStyle, this will enable you to create a button with dash border:

If you want to learn more about SwiftUI buttons, please check out our beginner guide here.

Introducing SwiftUI TabView and Working with Tab Bar Customization
macOS Programming: Working with Dark Theme and Building a BMI Calculator
Building an AI Image Recognition App Using Google Gemini and SwiftUI