Search code examples
swiftuibuttonborderuibezierpath

Bezier path drawing additional line


I am using bezier path to add a rounded border on my UI Button. I am always having an additional line that I don't want.

Code Here

    let maskLayer = CAShapeLayer()
    maskLayer.frame = self.bounds
    maskLayer.path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: cornerRadius, height: 2)).cgPath
    self.layer.mask = maskLayer
    // Add border
    let borderLayer = CAShapeLayer()
    borderLayer.path = maskLayer.path // Reuse the Bezier path
    borderLayer.fillColor = UIColor.clear.cgColor
    borderLayer.strokeColor = UIColor.white.cgColor
    borderLayer.lineWidth = 1
    borderLayer.frame = self.bounds
    self.layer.addSublayer(borderLayer)

ScreenShot Screenshot

Thank you guys!


Solution

  • I would suggest this code:

    button.layer.borderWidth = 2.0
    button.layer.borderColor = UIColor.white.cgColor
    button.layer.cornerRadius = 5.0
    button.layer.masksToBounds