# stroke and strokeBorder

## Overview

## .stroke

```swift
.stroke(.blue, lineWidth: 10)
```

![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FC1mpWo4XmGyfh5rfSJgT%2Fimage.png?alt=media\&token=ca571db3-c7dc-45b9-8062-887a2397a130)

...

```swift
.stroke(.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
```

![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FUt1VsziYhpYqHS6guS62%2Fimage.png?alt=media\&token=cb59cff1-8dfe-47a0-a6d2-072d76fd9e0b)

## .strokeBorder

{% code title="strokes the edges in white" %}

```swift
.strokeBorder(.white, linewidth: 3)
```

{% endcode %}

### .stroke vs .strokeBorder

Stroke follows a line to draw a shape from the middle of the pen. It does not take inti account the edges of the screen or given space. But StrokeBorder takes into account the screen or given space and then draws the shape.

![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2F64x9XJ1C6dU6RRFiBO5h%2FScreenshot%202023-01-08%20at%2006.39.45.png?alt=media\&token=dd75b86f-79a5-46bb-9929-9db6c2e99f29)**Stroke**

![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FeLBlxYgSyXsSrj5fTc3q%2FScreenshot%202023-01-08%20at%2006.39.45.png?alt=media\&token=68411071-851d-4fc8-a3a1-e7e6f14967e5)![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FsapkwFKMDVuVTf5NPEgN%2FScreenshot%202023-01-08%20at%2006.39.45.png?alt=media\&token=c8a89aac-6f11-477a-aaca-b7018a050627)

![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FE2EFHAiY4g7EQBNfHZrq%2Fimage.png?alt=media\&token=3fb99643-31a0-4987-8971-eaf35aa730cc)

![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FU4rI5GQb9RaDhGqKjcnQ%2Fimage.png?alt=media\&token=588e9d91-0cf1-4657-ba5b-e12f456a5102)![](https://5317963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F598GXhEFvy2PX7VpZjCw%2Fuploads%2FILkAKi5SQ6tgpASNflQi%2FScreenshot%202023-01-08%20at%2006.39.45.png?alt=media\&token=80912518-10ee-4f97-b444-0c467d8a8b33)

## Sources

### Videos

{% embed url="<https://youtu.be/j0eQQXspSQY>" %}

{% embed url="<https://youtu.be/Rbcabi9vRcc>" %}

### Articles / Documents

* [Hacking with Swift / 100 Days / Day-32 - Project-6](https://www.hackingwithswift.com/100/swiftui/32)