IOS: UIImageView border white with radius display a strange dark line in 4 corners

Question

I set the border white and radius for my ImageView. But in 4 corner of the ImageView, some dark line appear.
Here is the code I set the color

Answer 1

Updated code

I tried your code actually your image size is big initially I resized the image based on original Image size

UIImage *myIcon = [self imageWithImage:[UIImage imageNamed:@"abc.jpg"] scaledToSize:CGSizeMake(400, 400)];
self.image.image = myIcon;

sometimes corner radius does not work properly so I used UIBezierPath for this concept

 UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:self.image.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(10.0, 10.0)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.view.bounds;
maskLayer.path = maskPath.CGPath;
self.image.layer.mask = maskLayer;

for border color and width use this

swift 3

let maskPath = UIBezierPath(roundedRect: imageView.bounds, byRoundingCorners: ([.topLeft, .topRight, .bottomLeft, .bottomRight]), cornerRadii: CGSize(width: 10.0, height: 10.0))


    let borderShape = CAShapeLayer()
    borderShape.frame = self.imageView.bounds
    borderShape.path = maskPath.cgPath
    borderShape.strokeColor = UIColor.white.cgColor
    borderShape.fillColor = nil
    borderShape.lineWidth = 3
    self.imageView.layer.addSublayer(borderShape)

output

Update

CAShapeLayer*   borderShape = [CAShapeLayer layer];
borderShape.frame = self.image.bounds;
borderShape.path = maskPath.CGPath;
borderShape.strokeColor = [UIColor whiteColor].CGColor;
borderShape.fillColor = nil;
borderShape.lineWidth = 3;
[self.image.layer addSublayer:borderShape];

Swift

var borderShape: CAShapeLayer = CAShapeLayer.layer
borderShape.frame = self.image.bounds
borderShape.path = maskPath.CGPath
borderShape.strokeColor = UIColor.whiteColor().CGColor
borderShape.fillColor = nil
borderShape.lineWidth = 3
 self.image.layer.addSublayer(borderShape)

Output

Code for whole project

Answer 2

i tried this function written in imageview category:

- (void)setBorderWithRounCornersWithColor:(UIColor *)color{

    self.layer.cornerRadius = 5.0f;
    self.layer.masksToBounds = YES;

    if(color){

        self.layer.borderColor=color.CGColor;
        self.layer.borderWidth=1.0f;
    }

}

at time of using:

[self.imageView setBorderWithRounCornersWithColor:nil];

Answer 3

Actually you have to use two layers.

self.image.clipsToBounds = YES;
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.image.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(48, 48)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.image.bounds;
maskLayer.path = maskPath.CGPath;
maskLayer.strokeColor = [UIColor redColor].CGColor;

self.image.layer.mask = maskLayer;

CAShapeLayer*   frameLayer = [CAShapeLayer layer];
frameLayer.frame = self.image.bounds;
frameLayer.path = maskPath.CGPath;
frameLayer.strokeColor = [UIColor whiteColor].CGColor;
frameLayer.fillColor = nil;
frameLayer.lineWidth = 20;
[self.image.layer addSublayer:frameLayer];

Answer 4

I check your code you can change this line its work for me

self.image.layer.borderColor = [[UIColor clearColor] CGColor];

Answer 5

recently got same issue, but in slightly different context.

Result with ugly black border:

let image = UIImage(named: "File.png")!
let cornerRadius: CGFloat = 60
let frame = CGRect(origin: .zero, size: image.size)
let path = UIBezierPath(roundedRect: frame, cornerRadius: cornerRadius)
let rounded = UIGraphicsImageRenderer(size: image.size).image { context in
    path.addClip()
    image.draw(in: frame)
}

but if we add .insetBy(dx: 1, dy: 1) to frame - it will solve the problem.

Answer 6

Try clip to bounds:

self.image.clipToBounds = YES