Skip to main content

How to draw a border around a view

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to draw a border around a view ꎀ렚

SwiftUI by Example
Back to Home
How to draw a border around a view | SwiftUI by Example
How to draw a border around a view

Updated for Xcode 15

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 green border around a text view:

Text("Hacking with Swift")
    .border(.green)

Download this as an Xcode project

The text “Hacking with Swift” with a thin rectangular green border. There is almost no space between the text's edges and the border.
The text “Hacking with Swift” with a thin rectangular green border. There is almost no space between the text's edges and the border.

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

Download this as an Xcode project

The text “Hacking with Swift” with a thin rectangular green border. There is space around the text between its edges and the border.
The text “Hacking with Swift” with a thin rectangular green border. There is space around the text between its edges and the border.

This adds a 4-point red border:

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

Download this as an Xcode project

The text “Hacking with Swift” with a thick rectangular red border.
The text “Hacking with Swift” with a thick rectangular red border.

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(.blue, lineWidth: 4)
    )

Download this as an Xcode project

The text “Hacking with Swift” with a thick blue rounded-rectangular border.
The text “Hacking with Swift” with a thick blue rounded-rectangular border.

Tips

Use stroke() or strokeBorder() with shapes, and border() with other view types.

Similar solutions

How to draw a shadow around a view | SwiftUI by Example
How to draw a shadow around a view
How to draw a border inside a view | SwiftUI by Example
How to draw a border inside a view
How to color the padding around a view | SwiftUI by Example
How to color the padding around a view
How to control spacing around individual views using padding | SwiftUI by Example
How to control spacing around individual views using padding
How to add a border to a TextField | SwiftUI by Example
How to add a border to a TextField