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:

list of users with badly rendered rounded corners

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.

To get a gap between the images, otherwise their top and bottom edges touch — Matt, May 08 '15 at 13:24
How about setting :- [[cellImage layer] setBorderColor:[[UIColor clearColor] CGColor]];? — Vizllx, May 08 '15 at 13:25
Then just make your imageView a little bit smaller instead of setting border width — arturdev, May 08 '15 at 13:25
You can decrease the imageview width and height in 6 px to achieve that gap. — adboco, May 08 '15 at 13:27

Rob · Accepted Answer · 2015-08-25T02:01:10.633

6

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;

edited Aug 25 '15 at 02:01

answered May 08 '15 at 13:39

Rob

415,655
72
787
1,044

1

Although this works, I recommend using `[UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.bounds.size.width/2 ,imageView.bounds.size.height/2) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:NO]` instead of `bezierPathWithOvalInRect:`, as it makes a true circular shape (you can notice some angles using the latter). – Rufel May 08 '15 at 15:14
Not working when there is another background below imageviews rather than white. It showing that background instead of white. any suggestions to solve? – Kiran Jasvanee Sep 08 '17 at 12:40
Hi @Rob, I figure out the way. will post new answer with merge of your code. Will help developers to solve. – Kiran Jasvanee Sep 08 '17 at 12:44

Vizllx · Answer 2 · 2017-11-09T12:47:52.773

-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;

edited Nov 09 '17 at 12:47

answered May 08 '15 at 13:30

Vizllx

9,135
1
41
79

The `layer` doesn't have the `clipsToBounds` property. – Matt May 08 '15 at 13:38
Thanks @MattPotts for rectifying, I was in hurry ;-) – Vizllx May 08 '15 at 13:40

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

2 Answers2

Linked

Related