How to make a SwiftUI view with rounded corners AND a border

Question

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.

aheze · Accepted Answer · 2022-04-05 00:05:52Z

206

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 5, 2022 at 0:05

aheze

31.5k12 gold badges107 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Deepansh Jagga Over a year ago

Using strokeBorder() is better. It will not give prevent any problems with edge insets.

SoftDesigner Over a year ago

strokeBorder() is a crucial modifier! Otherwise it looks like a border made in MS Paint

C6Silver Over a year ago

strokeBorder is iOS 17.x and above. At some point that won't matter but it still does at the time of this writing.

aheze Over a year ago

@C6Silver there's a version of strokeBorder that's available in iOS 13. The newer one is just more flexible in terms of how you can stack modifiers

C6Silver Over a year ago

@aheze - thanks for that. Every time I have tried a "strokeBorder" it tells me it requires iOS 17.x. I wish Apple would make the version requirements more clear within Xcode.

|

kelin · Accepted Answer · 2025-08-31 08:30:31Z

33

I'd recommend using an overlay with inset when trying to add rounded border:

.overlay {
    let lineWidth: CGFloat = 50
    RoundedRectangle(cornerRadius: 20)
        .inset(by: -lineWidth / 2)
        .stroke(.blue, lineWidth: lineWidth)
}

Example

edited Aug 31 at 8:30

kelin

12.2k8 gold badges73 silver badges111 bronze badges

answered Nov 29, 2022 at 11:53

Levan Apakidze

4965 silver badges11 bronze badges

5 Comments

trinity420 Over a year ago

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!!

Brudus Over a year ago

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!

kelin Aug 1 at 7:05

I think you have to set negative inset here if you want outside border.

Levan Apakidze Aug 6 at 11:55

border automatically goes outside the view, the inset brings it inside so you could just remove the .inset modifier

kelin Aug 31 at 8:26

No, Levan, you are not right. You can verify it using your own example by setting border thickness to some ridiculously big values. The inset should be negative and it should be half of the border thickness, if we don't want the original view to be covered.

Pratik Panchal · Accepted Answer · 2024-02-21 09:58:44Z

struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    func roundedCornerWithBorder(lineWidth: CGFloat, borderColor: Color, radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape(RoundedCorner(radius: radius, corners: corners) )
            .overlay(RoundedCorner(radius: radius, corners: corners)
                .stroke(borderColor, lineWidth: lineWidth))
    }
}

How to use different examples.

Example: 1 - Using All Side Corner Radius with Border.

  var body: some View {
        Text("Some Text")
            .padding()
            .background(.red)
            .roundedCornerWithBorder(lineWidth: 2, borderColor: .blue, radius: 4, corners: [.allCorners])        
    }

Example: 2 - For Top Left & Bottom Left Side Corner Radius with Border.

var body: some View {
    Text("Some Text")
        .padding()
        .background(.red)
        .roundedCornerWithBorder(lineWidth: 2, borderColor: .blue, radius: 20, corners: [.topLeft, .bottomLeft])
}

Example: 3 - For Top Right & Bottom Right Side Corner Radius with Border.

var body: some View {
    Text("Some Text")
        .padding()
        .background(.red)
        .roundedCornerWithBorder(lineWidth: 2, borderColor: .blue, radius: 20, corners: [.topRight, .bottomRight])
}

Example: 4 - For Top Left & Bottom Right Side Corner Radius with Border.

var body: some View {
    Text("Some Text")
        .padding()
        .background(.red)
        .roundedCornerWithBorder(lineWidth: 2, borderColor: .blue, radius: 20, corners: [.topLeft, .bottomRight])
}

Radu Ursache · Accepted Answer · 2023-08-27 17:28:21Z

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

Cem Kazım · Accepted Answer · 2023-08-27 21:34:21Z

1

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.

answered Aug 27, 2023 at 21:34

Cem Kazım

112 bronze badges

Comments

Mor4eza · Accepted Answer · 2025-10-19 12:15:39Z

0

Instead of using cornerRadius, consider using .clipShape(Capsule())

VStack(alignment: .leading) {
                        
                        Text(address.fullAddress ?? "")
                            .baamStyle()
                        Text(address.postalCode ?? "")
                            .baamStyle()
                    }
                    .padding()
                    .background(SwiftUI.Color(UIColor.Baam.cardViewBackground.color))
                    .clipShape(Capsule())

answered Oct 19 at 12:15

Mor4eza

3043 silver badges13 bronze badges

Comments

Blerd · Accepted Answer · 2025-11-17 15:58:26Z

0

VStack {
    Text("some text")
        Button("Ok") {}
            .foregroundColor(.cyan)
            .padding()
    }
    .padding()
    .background(.red)
    .cornerRadius(20)
    .overlay(
        RoundedRectangle(cornerRadius: 20)
            .stroke(Color.blue, lineWidth: 5)
    )
}

answered Nov 17 at 15:58

Blerd

865 bronze badges

Collectives™ on Stack Overflow

How to make a SwiftUI view with rounded corners AND a border

7 Answers 7

8 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

8 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related