add borders to 2 sides only

Question

I have a View stack as Expanded white part and I have given the corner radius to it, I need to give radius to only top left and top right

My Code

struct loginView: View {
    @State private var stringOfTextField: String = String()
    
    var body: some View {
        ZStack {
            LinearGradient(colors: [Color("primarycolor"), Color("secondarycolor")],
                           startPoint: .top,
                           endPoint: .center).ignoresSafeArea()
            VStack() {
                
                Text("Login").foregroundColor(.white).font(
                    .system(size: 18)
                    
                )
                
                Image("logo")
                Spacer()
            }
            VStack {
                Spacer(minLength: 230)
                VStack{
                    HStack {
                        Image(systemName: "person").foregroundColor(.gray)
                        TextField("Enter Email", text: $stringOfTextField)
                        
                    }    .padding()
                        .overlay(RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.gray, style: StrokeStyle(lineWidth: 1.0)))
                        .padding(.bottom)
                    
                    TextField("Enter Password", text: $stringOfTextField)
                        .padding()
                        .overlay(RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.gray, style: StrokeStyle(lineWidth: 1.0)))
                        .padding(.bottom)
                    
                    Text("Forgot Password ?")
                        .frame(maxWidth: .infinity, alignment: .trailing)
                        .padding(.bottom)
                    
                    Button(action: {
                        print("sign up bin tapped")
                    }) {
                        Text("SIGN IN")
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .font(.system(size: 18))
                            .padding()
                            .foregroundColor(.white)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color("secondarycolor"), lineWidth: 1)
                            )
                    }
                    .background(Color("secondarycolor"))
                    
                    .cornerRadius(25)
                    Spacer()
                    
                }
                .padding(.vertical, 60)
                .padding(.horizontal, 20)
                .background(Color.white)
                .cornerRadius(30)
            }
            
        }
        .ignoresSafeArea(edges: [.bottom])
                    
    }
}

Preview

You can see on the end it's showing white border because border is given to all sides, I need to give it to top 2 sides only. I try by Roundedcorner, but that was not working.

This is a repeat of [https://stackoverflow.com/questions/58632188/swiftui-add-border-to-one-edge-of-an-image](https://stackoverflow.com/questions/58632188/swiftui-add-border-to-one-edge-of-an-image) — Awesomeplayer165, Oct 16 '22 at 06:27
@Awesomeplayer165 the question is rounded corners not borders — Nhat Nguyen Duc, Oct 16 '22 at 06:33
Does this answer your question? [Round Specific Corners SwiftUI](https://stackoverflow.com/questions/56760335/round-specific-corners-swiftui) — Nhat Nguyen Duc, Oct 16 '22 at 06:39

AdR · Accepted Answer · 2022-10-16T07:14:14.223

You can try like this

struct ContentView: View {    
var body: some View {
VStack{
//....
//your content
//.....
}
.clipShape(CustomCorner(corners: [.topLeft, .topRight], radius: 25))

}
}

struct CustomCorner: Shape {

var corners : UIRectCorner
var radius : CGFloat

func path(in rect: CGRect)->Path{
    let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    return Path(path.cgPath)
}
}

add borders to 2 sides only

1 Answers1