Issue with rounded corners of ImageView with gradient colour

Question

I created a rectangle using following code and now I need to rounded the corners of this rectangle. I set layer.cornerRadius also, can anyone help me?

My code as below,

private func setGradientBorder(_ ivUser:UIImageView) {

    ivUser.layer.masksToBounds = true
    ivUser.layer.cornerRadius = ivUser.frame.width / 2

    let gradient = CAGradientLayer()
    gradient.frame =  CGRect(origin: CGPoint.zero, size: ivUser.frame.size)
    gradient.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]

    let maskPath = UIBezierPath(roundedRect:  ivUser.bounds,
                                byRoundingCorners: [.allCorners],
                                cornerRadii: CGSize(width: ivUser.frame.width/2, height: ivUser.frame.height/2)).cgPath

    let shape = CAShapeLayer()
    shape.lineWidth = 2
    shape.path = maskPath
    shape.strokeColor = UIColor.black.cgColor
    shape.fillColor = UIColor.clear.cgColor
    gradient.mask = shape

    ivUser.layer.addSublayer(gradient)

}

output: gradient does not display properly rounded

Answer 1

This is how UIBezierPath works. Half of the line width will go on one side of the actual path, and half will go on another. Thats why it looks kinda cut out.

You will need to inset your paths rect by half of the line width, something like this:

let lineWidth: CGFloat = 2    
let maskPath = UIBezierPath(roundedRect:  ivUser.bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2),
                                byRoundingCorners: [.allCorners],
                                cornerRadii: CGSize(width: ivUser.frame.width/2, height: ivUser.frame.height/2)).cgPath