How to remove black edge on UIImageView with rounded corners and border width?

Question

I have the following code to make UIImageView in each of my UITableView cells rounded corners:

 - (void)awakeFromNib { // Rounded corners. [[cellImage layer] setCornerRadius:([cellImage frame].size.height / 2)]; [[cellImage layer] setMasksToBounds:YES]; [[cellImage layer] setBorderColor:[[UIColor whiteColor] CGColor]]; [[cellImage layer] setBorderWidth:3]; // Trouble! } 

I want the images to have a small gap between them, and decided that I can use the border width to make this happen. The following is an image of what actually happened:

This is the foggy black border that I want to know about how to get rid of. I would like to think that there is a way to do this using the width of the border. If not, the best approach might be just resizing the image itself and just setting the border width to 0.

Answer 1

Instead of using the angular radius, you can create a bezier path for the mask, create a shape layer for this path, and then specify this shape layer for the image view layer mask:

 CGFloat margin = 3.0; CGRect rect = CGRectInset(imageView.bounds, margin, margin); UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.bounds.size.width/2, imageView.bounds.size.height/2) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:NO]; CAShapeLayer *mask = [CAShapeLayer layer]; mask.path = path.CGPath; imageView.layer.mask = mask; 

Answer 2

What you do, you crop the profile image and the border together, which makes the profile image of the cell pass through the border.

You are missing this line: -

 cellImage.clipsToBounds = YES;