How to draw a border around a view
About 2 min
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)
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)
This adds a 4-point red border:
Text("Hacking with Swift")
.padding()
.border(.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(.blue, lineWidth: 4)
)
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
