How to draw a border around a view
Fully updated for Xcode 11.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 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.
SPONSORED Why the top iOS apps rely on Instabug for crash reporting. Crash reporting + Bug reporting + Customizable in-app surveys all in one SDK. Know which line of code caused the crash along with network logs, repro steps, and the session profiler to identify and resolve severe crashes quickly. See more detailed features comparison and try Instabug for free here.
Similar solutions…
