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

Question

I have the following code to make the UIImageView in each of my UITableView's cells have 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 bit of a gap between them, and figured I could make use of the border width to make that happen. Below is an image of what actually happened:

It's that faint black border that I want to know how to get rid of. I'd like to think there's a way of doing it using border width. If not, the best approach might be just to resize the image itself and just set the border width to be 0.

Answer 1

Rather than using corner radius, you can create bezier path for the mask, create a shape layer for that path, and then specify that shape layer for the image view's layer's 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 are doing is, you are clipping the profile image and the border together, which is making the cell's profile image extending through the border.

You are missing this line:-

cellImage.clipsToBounds = YES;