< How to stack modifiers to create more advanced effects

How to draw a border around a view

Paul Hudson @twostraws October 26th 2019

Fully updated for Xcode 11.2

SwiftUI gives us a dedicated border() modifier to draw borders around views. It has a few variations depending on whether you want to specify a stroke width or a corner radius, so here are a few examples:

This adds a simple 1-point black border around a text view:

Text("Hacking with Swift")
    .border(Color.black)

If you want to make the border so that it doesn’t sit right on the edges of your view, add some padding first:

Text("Hacking with Swift")
    .padding()
    .border(Color.black)

This adds a 4-point red border:

Text("Hacking with Swift")
    .padding()
    .border(Color.red, width: 4)

If you want to round the corners of your border, you need to use the overlay() modifier instead. For example, this adds a 4-point blue border with 16-point rounded corners:

Text("Hacking with Swift")
    .padding()
    .overlay(
        RoundedRectangle(cornerRadius: 16)
            .stroke(Color.blue, lineWidth: 4)
    )

Tip: Use stroke() with shapes, and border() with other view types.

How to draw a border around a view

Similar solutions…