SwiftUI : How to draw borders or strokes in SwiftUI?

SwiftUI provides us with various modifiers for drawing borders on views and shapes. Specifically: stroke, stroke border, and border. At first glance, those modifiers may look identical, but they have different behavior and different places where they can be applied.

In any image redactor like Photoshop or Sketch, when you add a Stroke (border), you select the position. Outside, Inside, or Center. In the following image, you may see how those look. ​ Outside is where the entire border wraps around the object. Inside is where it sits on the inside and center being half and half.

For Shapes, use stroke or strokeBorder modifier.


The stroke modifier draws borders centered(half inside half outside).

.stroke(Color.purple, lineWidth: 10)

Stroke Border

Stroke Border draws border inside a shape.

.strokeBorder(Color.blue, lineWidth: 10)

For Views, use border modifier.


The border modifier draws borders outside of view.

Image("piano").border(Color.black, width: 3)