button with corner and hide bottom border

Question

The result i want

what i'm getting :

i use this code:

    func roundedTopLeftButton(radius : Int, colorBorder : UIColor) {
    // Add border
       let gradient = CAGradientLayer()
       let size = CGSize(width: self.frame.width, height: self.frame.height)
       let rect = CGRect(origin: .zero, size: size)
       gradient.frame =  CGRect(origin: CGPoint.zero, size: size)
       gradient.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]


       let shape = CAShapeLayer()
       shape.lineWidth = 2


       shape.path = UIBezierPath(roundedRect: rect,
       byRoundingCorners: [.topLeft , .topRight],
       cornerRadii: CGSize(width: radius, height: radius)).cgPath
       shape.strokeColor = colorBorder.cgColor
       shape.fillColor = UIColor.clear.cgColor
       gradient.mask = shape

    self.layer.addSublayer(shape)
}

how can hide buttom border for the button Paiements please ?

Answer 1

Use a custom path, there is nothing complicated with Corner Radius. You just need to draw your shape on a paper sheet. Mark the point of interests, know a little about trigonometry (and that's just to know the angles) and a little of basic geometry.

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: bounds.size.height))
path.addLine(to: CGPoint(x: 0, y: radius))
path.addArc(withCenter: CGPoint(x: radius, y: radius),
            radius: radius,
            startAngle: CGFloat.pi,
            endAngle: -CGFloat.pi/2.0,
            clockwise: true)
path.addLine(to: CGPoint(x: bounds.size.width - radius, y: 0))
path.addArc(withCenter: CGPoint(x: bounds.width - radius, y: radius),
            radius: radius,
            startAngle: -CGFloat.pi/2.0,
            endAngle: 0,
            clockwise: true)
path.addLine(to: CGPoint(x: bounds.size.width, y: bounds.size.height))