< How to stack modifiers to create more advanced effects

How to draw a border around a view

Paul Hudson @twostraws March 11th 2021

Updated for Xcode 12.5

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.green)

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.green)

This adds a 4-point red border:

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

If you want anything more advanced – e.g., 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() or strokeBorder() with shapes, and border() with other view types.