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 for my ImageView

self.image.layer.cornerRadius = 10;
self.image.layer.borderWidth = 3;
self.image.layer.borderColor = [[UIColor whiteColor] CGColor];
self.image.layer.masksToBounds = YES;

This is a small demo project. My storyboard only contains the ImageView, and I don't set any constraint for my ImageView.

I don't know why this happened, it have tested on simulator and real device but it give a same error

Here is demo project: (it's very simple) https://drive.google.com/file/d/0B_poNaia6t8kT0JLSFJleGxEcmc/view?usp=sharing

Update
Some people give a solution is change the color of border color from whiteColor to clearColor. Of course it will make 4 lines disappear. But if I using clearColor, I don't need to add border to my ImageView.
I need border white for some reason

@Anbu.Karthik I have add a demo project, if you don't mind, can you check it — Linh, Mar 23 '16 at 10:11
Check this answer: http://stackoverflow.com/a/18515698/1949494 — Jelly, Mar 23 '16 at 10:22
hi I give answer please check and if it work for you then please up vote my answer — Birendra, Mar 23 '16 at 10:26
@Anbu.Karthik , did you change my image to smaller size image and it's work — Linh, Mar 23 '16 at 10:40
@Anbu.Karthik thank you for your time. I will try to figure out the problem because actually it need a whiteColor border not clearColor border — Linh, Mar 23 '16 at 10:47
The issue is older and it is not going to work. Why don't you use a `CAShapeLayer`? — Jelly, Mar 23 '16 at 10:48
@Jelly I have checked your suggest link, but it don't mention to border color, it just about set border radius. I'm new in iOS, i don't know about `CAShapeLayer`. if you don't mind can you check my demo project. it very light and simple — Linh, Mar 23 '16 at 10:51
@Phan Văn Linh I put an answer with the code that does that. Just paste it in your sample project instead of the existing one — Jelly, Mar 23 '16 at 11:14

Anbu.Karthik · Accepted Answer · 2017-07-31T12:17:52.203

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

thank you but you forgot my border 3px with `whiteColor`. can you add this to the code. I have add it in my code but it don't display correct — Linh, Mar 23 '16 at 11:00

score 1 · Answer 2 · answered Mar 23 '16 at 11:08

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

score 0 · Answer 3 · answered Mar 23 '16 at 10:04

0

Try clip to bounds:

self.image.clipToBounds = YES

answered Mar 23 '16 at 10:04

Joe Benton

3,703
1
21
17

score 0 · Answer 4 · answered Mar 23 '16 at 10:12

0

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

answered Mar 23 '16 at 10:12

Suhas Arvind Patil

1,732
1
19
31

it's not working. 4 dark line still visible. if you don't mind, please check my demo project (that I have included in the question) – Linh Mar 23 '16 at 10:16

Chirag D jinjuwadiya · Answer 5 · 2016-03-23T10:24:46.650

0

when you add a border that add in inside the image border line and when you set rounded border that time your round corner has some transparent part so that part will display in corner side just change the Color of border color

image1.layer.cornerRadius = 10;
image1.layer.borderWidth = 3;
image1.layer.borderColor = [[UIColor whiteColor] CGColor];
image1.layer.masksToBounds = YES;


image2.layer.cornerRadius = 10;
image2.layer.borderWidth = 3;
image2.layer.borderColor = [[UIColor clearColor] CGColor];
image2.layer.masksToBounds = YES;

edited Mar 23 '16 at 10:24

answered Mar 23 '16 at 10:15

Chirag D jinjuwadiya

653
7
18

I need a white color for my border, not `clearColor` if you don't mind, please check my demo project (that I have included in the question) – Linh Mar 23 '16 at 10:15

score 0 · Answer 6 · answered Mar 23 '16 at 10:22

0

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

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

answered Mar 23 '16 at 10:22

Birendra

623
1
5
17

if I set the color of border to clearColor, than I don't need to add border to my `ImageView` – Linh Mar 23 '16 at 10:27
then you have to set border width is 0 – Birendra Mar 23 '16 at 10:40
:( sorry for my bad explain, but in my case, it need a border with `whiteColor` not `clearColor` – Linh Mar 23 '16 at 10:44

Kirow · Answer 7 · 2019-06-11T10:16:49.973

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.

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

7 Answers7

Linked