How to remove/fix extra pointed corners in images?

Question

I have created this Facebook homeView using swiftUI. I have some issues with the stories View image. See the screenshot. How to remove/fix different pointed corners in images?

ZStack{
    Color(.secondarySystemGroupedBackground)
    ScrollView(.vertical){
        VStack{
            ScrollView(.horizontal,showsIndicators: false){
                HStack(spacing:3){
                    ForEach(stoires,id:\.self) { name in
                        Image(name)
                            .resizable()
                            .aspectRatio( contentMode: .fill)
                            .frame(width: 140,height: 199,alignment: .center)
                            .background(Color.red)
                            .clipped()
                            .overlay(
                                RoundedRectangle(cornerRadius: 16)
                                    .stroke(Color(.systemGray5), lineWidth: 4)
                            )
                    }
                }.padding()
            }
        }
    }
}

https://stackoverflow.com/questions/71744888/swiftui-view-with-rounded-corners-and-border ? — Larme, Jul 06 '23 at 19:38

score 1 · Answer 1 · answered Jul 07 '23 at 08:49

when try to use overlay then some time you can't get appropiate result.

try to use inset when trying to add rounded border

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

score 0 · Accepted Answer · answered Jul 07 '23 at 19:23

struct StoriesView: View {
    let stoires: [String]
    var body: some View {
        ScrollView(.horizontal,showsIndicators: false) {
            HStack(spacing:3){
                ForEach(stoires,id:\.self) { name in
                    Image(name)
                        .resizable()
                        .aspectRatio( contentMode: .fill)
                        .frame(width: 140,height: 199,alignment: .center)
                        .background(Color.red)
                        .clipped()
                        .cornerRadius(20)//<-- add this cornerRadius
                        .overlay(
                            RoundedRectangle(cornerRadius: 20)//<-- add this cornerRadius
                                .stroke(Color(.systemGray5), lineWidth: 5)
                        )//<-- add this cornerRadius
                        .padding(.trailing,4)//<-- adding nice padding 
                }
            }.padding()
            Spacer()
        }
    }
}

How to remove/fix extra pointed corners in images?

2 Answers2