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.

An Introduction to AR Quick Look in iOS 12
How to Access Photo Library and Use Camera in SwiftUI
How to Create Star Wars Animated Text Using SwiftUI
There are currently no comments.