SwiftUI: Border with Rounded Corners for Buttons and Text

Border with Rounded Corners 

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:

1 2 3 4 5 6 7 8 9 10

Button(action: {     print("Hello button tapped!") }) {     Text("Hello World")         .fontWeight(.bold)         .font(.title)         .foregroundColor(.purple)         .padding()         .border(Color.purple, width: 5) }

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

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

1	.border(Color.purple, width: 5, cornerRadius: 20)

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:

1 2 3 4 5 6 7 8 9 10 11 12 13

Button(action: {     print("Hello button tapped!") }) {     Text("Hello World")         .fontWeight(.bold)         .font(.title)         .foregroundColor(.purple)         .padding()         .overlay(             RoundedRectangle(cornerRadius: 20)                 .stroke(Color.purple, lineWidth: 5)         ) }

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:

1 2 3 4 5 6 7 8 9 10 11 12 13

Button(action: {     print("Hello button tapped!") }) {     Text("Hello World")         .fontWeight(.bold)         .font(.title)         .foregroundColor(.purple)         .padding()         .overlay(             Capsule(style: .continuous)                 .stroke(Color.purple, style: StrokeStyle(lineWidth: 5, dash: [10]))         ) }