Rounded Borders in SwiftUI

How do I round borders in SwiftUI?

I would assume this would work:

.cornerRadius(10)
.border(Color.white)

Tho it dose not work.

This is my workaround for now:

.overlay(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 1).foregroundColor(.white))

For an **outside aligned rounded border**, before the overlay, you can add in some padding to the view ⤵︎
```swift
let strokeWidth: CGFloat = 1

YourView
.padding([.all], strokeWidth / 2) // set the width to half of the stroke width
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color.black, lineWidth: strokeWidth)
)
```

I prefer this one:

.background(RoundedRectangle(cornerRadius: 4.0).stroke(borderColor, lineWidth: borderWidth))
.foregroundColor(.blue)

the overlay doesn't get along with the offset method... 🤔

That's not a workaround, it's how you do it in SwiftUI. Two things:

- There used to be a `cornerRadius` modifier that became deprecated in... beta 4? beta 5? Yes, it's been a moving target.

- With a **great** amount of thanks to @kontiki ([blog post][1]), here's an extension that nicely returns what you want:


extension View {
public func addBorder<S>(_ content: S, width: CGFloat = 1, cornerRadius: CGFloat) -> some View where S : ShapeStyle {
let roundedRect = RoundedRectangle(cornerRadius: cornerRadius)
return clipShape(roundedRect)
.overlay(roundedRect.strokeBorder(content, lineWidth: width))
}
}

Usage:

.addBorder(Color.white, width: 1, cornerRadius: 10)


[1]:

[To see links please register here]

Developers looking for **circular shape & border**.

Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))