How to draw a border around a view
Updated for Xcode 13.3
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
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
This adds a 4-point red border:
Text("Hacking with Swift")
.padding()
.border(.red, width: 4) Download this as an Xcode project
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
Tip: Use stroke() or strokeBorder() with shapes, and border() with other view types.
SPONSORED Fernando's book will guide you in fixing bugs in three real, open-source, downloadable apps from the App Store. Learn applied programming fundamentals by refactoring real code from published apps. Hacking with Swift readers get a $10 discount!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
