SwiftUI view with rounded corners AND border

Question

            ZStack {
                VStack {
                    Text("some text")
                    Button("Ok") {}
                     .foregroundColor(.cyan)
                     .padding()
                }
                .padding()
            }
            .background(.red)
            .border(.blue, width: 5)
            .cornerRadius(20)

I want the entire view to have the blue border with rounded corners (instead of the red square overlapping the rounded blue border. How? I've tried seemingly all variations of ordering the modifiers.

Removing the ZStack and placing the modifiers on the VStack results in the same issue. — soleil, Apr 04 '22 at 23:57

score 83 · Accepted Answer · answered Apr 05 '22 at 00:05

83

SwiftUI borders have straight edges no matter what corner radius you apply (.cornerRadius simply clips the view to a rounded mask and doesn't adjust the border's appearance).

If you want a rounded border, you'll need to overlay and .stroke a rounded rectangle:

VStack {
    Text("some text")
    Button("Ok") {}
        .foregroundColor(.cyan)
        .padding()
}
.padding()
.background(.red)
.cornerRadius(20) /// make the background rounded
.overlay( /// apply a rounded border
    RoundedRectangle(cornerRadius: 20)
        .stroke(.blue, lineWidth: 5)
)

Result:

answered Apr 05 '22 at 00:05

aheze

24,434
8
68
125

13

Using strokeBorder() is better. It will not give prevent any problems with edge insets. – Deepansh Jagga Apr 30 '23 at 03:08
2

`strokeBorder()` is a crucial modifier! Otherwise it looks like a border made in MS Paint – SoftDesigner Jun 06 '23 at 08:39

score 16 · Answer 2 · answered Nov 29 '22 at 11:53

16

sometimes just adding the overlay may produce unsatisfying results (this is the case when the used view is designed with infinite width/height)

for example

so I'd recommend using an inset when trying to add rounded border

.overlay(
    RoundedRectangle(cornerRadius: 20)
        .inset(by: 5) // inset value should be same as lineWidth in .stroke
        .stroke(.blue, lineWidth: 5)
)

answered Nov 29 '22 at 11:53

Levan Apakidze

221
2
6

This answer works for HStack etc. too, great! The only thing that worked for me, most other solutions are for buttons but leave strange line width differences, this here does not. Exactly what your sample image shows was my problem, thx!! – trinity420 Feb 07 '23 at 14:10
1

This solution works incredibly well with things like LazyVGrids that have a spacing and you use `.frame(maxWidth: .infinity)` on the elements. Before the spacing was too small then, now with the inset it works like a charm! – Brudus Apr 27 '23 at 10:38

score 0 · Answer 3 · answered Aug 27 '23 at 17:28

Adding over the other answers, here is a neat extension for your SwiftUI app:

fileprivate struct ModifierCornerRadiusWithBorder: ViewModifier {
    var radius: CGFloat
    var borderLineWidth: CGFloat = 1
    var borderColor: Color = .gray
    var antialiased: Bool = true
    
    func body(content: Content) -> some View {
        content
            .cornerRadius(self.radius, antialiased: self.antialiased)
            .overlay(
                RoundedRectangle(cornerRadius: self.radius)
                    .inset(by: self.borderLineWidth)
                    .strokeBorder(self.borderColor, lineWidth: self.borderLineWidth, antialiased: self.antialiased)
            )
    }
}

extension View {
    func cornerRadiusWithBorder(radius: CGFloat, borderLineWidth: CGFloat = 1, borderColor: Color = .gray, antialiased: Bool = true) -> some View {
        modifier(ModifierCornerRadiusWithBorder(radius: radius, borderLineWidth: borderLineWidth, borderColor: borderColor, antialiased: antialiased))
    }
}

You can then just do

VStack {
    Text("some text")
    Button("Ok") {}
        .foregroundColor(.cyan)
        .padding()
}
.padding()
.background(.red)
.cornerRadiusWithBorder(radius: 20, borderLineWidth: 5, borderColor: . blue)

to achieve this

score 0 · Answer 4 · answered Aug 27 '23 at 21:34

Using ".stroke" might be considered a best practice approach. However, if you'd like to try, the following method could also suffice:

RoundedRectangle(cornerRadius: 20)
    .foregroundColor(.blue)
    .frame(width: 100, height: 100)
    .overlay(
        RoundedRectangle(cornerRadius: 20)
            .foregroundColor(.red)
            .frame(width: 90, height: 90)
            .overlay(
                VStack {
                    Text("some text")
                    Button("Ok") {}
                }
            )
    )

You will get the same result with this.

SwiftUI view with rounded corners AND border

4 Answers4

Linked