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;