Setting Corner Radius on UIImageView not working

Question

I'm at a bit of a loss. I've used the layer property of UIView to round the corners of multiple elements in my app. However, this one UIImageView is simply not complying. Not sure what I am missing.

The UIImageView (called previewImage) is contained in a Table View Cell. I've tried setting the cornerRadius property multiple location (in the cell itself and in the controller that creates the cell) to no avail.

static NSString *CellIdentifier = @"MyTableViewCell";

MyTableViewCell *cell = (MyTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:CellIdentifier owner:self options:nil];
    cell = [topLevelObjects objectAtIndex:0];
    cell.previewImage.layer.cornerRadius = 20; //Made it 20 to make sure it's obvious.
}

Is there something about the way cells are loaded that I'm missing?

score 392 · Accepted Answer · edited Aug 30 '16 at 19:36

392

You need to set the layer's masksToBounds property to YES:

cell.previewImage.layer.masksToBounds = YES;

This is because the UIImageView control creates a pseudo-subview to hold the UIImage object.

edited Aug 30 '16 at 19:36

Michael Sacks

917
1
11
17

answered Nov 30 '10 at 14:18

Evan Mulawski

54,662
15
117
144

21

Unless you also rasterize the view (view.layer.shouldRasterize = YES), every frame will require a re-mask of all the pixels. – jjxtra Aug 12 '13 at 13:41
@jjxtra so it's better to set `shouldRasterize = false`? – user924 Apr 19 '19 at 17:54
2

If shouldRasterize is false you pay the mask creation overhead everyframe. If shouldRasterize is true and your layer changes every frame, you pay the mask overhead and the rasterization overhead. Ideal case is a static (not changing very often) layer with shouldRasterize = true. – jjxtra Apr 20 '19 at 03:53

Naishta · Answer 2 · 2019-01-18T11:23:08.447

56

Also worth noting that

If you are using aspectFit AND cornerRadius with clipsToBounds/masksToBounds, you won't get the rounded corners.

i.e if you have this

theImageView.contentMode = .scaleAspectFit

and

   theImageView.layer.cornerRadius = (theImageView.frame.size.height)/2
    theImageView.clipsToBounds = true

or

theImageView.layer.masksToBounds = true

It won't work. you will have to get rid of aspectFit code

//theImageView.contentMode = .scaleAspectFit

Make sure the width and the height for the Image View is same

edited Jan 18 '19 at 11:23

answered Jun 22 '17 at 14:23

Naishta

11,885
4
72
54

In short: set aspect ratio 1:1 if you want to use AspectFit – djdance Mar 11 '19 at 11:24
It won't work. you will have to get rid of aspectFit code This helped me – Shoaib Bagwan Jun 23 '21 at 04:45
If we want to use aspect-fit, we can create our own rounded-corner mask. Ref: https://stackoverflow.com/questions/34962103/how-to-set-uiimageview-with-rounded-corners-for-aspect-fit-mode – Sam Sep 21 '22 at 16:04

score 24 · Answer 3 · edited Oct 06 '12 at 09:34

24

This should work

cell.previewImage.clipsToBounds = YES;

cell.previewImage.layer.cornerRadius = 20;

edited Oct 06 '12 at 09:34

j0k

22,600
28
79
90

answered Oct 06 '12 at 09:16

Teena nath Paul

2,219
23
28

3

Not sure `clipsToBounds` is a method on the later class. Believe it's `masksToBounds` as above. – Alfie Hanssen May 02 '13 at 20:12
4

@AlfieHanssen layers have masksToBounds:, views have clipsToBounds: – Kevin Jan 11 '16 at 07:33

score 12 · Answer 4 · answered Nov 30 '10 at 14:20

12

I believe you need to set:

cell.previewImage.layer.masksToBounds = YES;
cell.previewImage.layer.opaque = NO;

answered Nov 30 '10 at 14:20

Daniel Dickison

21,832
13
69
89

score 4 · Answer 5 · answered Oct 09 '15 at 01:38

4

In Xcode Interface Builder, selecting 'Clip Subviews' Drawing attribute for the view together with setting the corner radius in the code cell.previewImage.layer.cornerRadius = 20;does the job for me!

See 'Clip Subviews' option in IB

answered Oct 09 '15 at 01:38

koira

1,197
8
10

score 2 · Answer 6 · edited Oct 20 '16 at 15:31

2

Try this below piece of code

cell.previewImage.layer.cornerRadius = 20;
cell.previewImage.clipsToBounds = YES;

edited Oct 20 '16 at 15:31

Ramkumar chintala

958
11
24

answered Oct 20 '16 at 13:57

Vaibhav Thakre

61
3

score 2 · Answer 7 · edited Dec 20 '18 at 11:22

2

Try this code:-

self.imgaviewName.clipsToBounds = true
self.imageviewName.layer.cornerRadius = 10

edited Dec 20 '18 at 11:22

Suraj Rao

29,388
11
94
103

answered Dec 20 '18 at 11:12

kangna sharma

102
4

Code-only answers are discouraged. Please click on [edit] and add some words summarising how your code addresses the question, or perhaps explain how your answer differs from the previous answer/answers. Thanks – Nick Dec 20 '18 at 11:34

score 2 · Answer 8 · answered Jul 02 '20 at 10:03

For imageView.contentMode = .scaleAspectFill the cornerRadius is not applied if the image is very large, depending on the hardware.

Some tests with resized panorama images:

iPhone X, image size 5000x1107: 4000x886: ✅
iPhone 6s Plus, image size 10000x2215: 5000x1107: ✅
iPhone 6s, image size 10000x2215: 5000x1107: ✅

The imageView dimensions where 160x100. Interestingly, the newer hardware isn't necessarily more capable.

Feel free to edit this post with more test results!

score 2 · Answer 9 · answered Sep 26 '21 at 09:38

UIImageView gives cornerRadius with clipsToBounds folowing is example of Swift and Objectiv-C (The followfing example code for round image)

Swift

myImageView.layer.cornerRadius = myImageView.frame.size.height/2.0
myImageView.clipsToBounds = true

Objectiv -C

[myImageView.layer setCornerRadius:myImageView.frame.size.height/2.0];
[myImageView setClipsToBounds:TRUE];

IronmanX46 · Answer 10 · 2019-04-08T14:31:26.370

1

Swift 4.2 Answer:

In order for the corner radius to work, add the image to a UIView and then you need to set the image's masksToBounds property to true:

planeImage.layer.masksToBounds = true
planeImage.layer.cornerRadius = 20

Note: Replace 20 by the desired cornerRadius

edited Apr 08 '19 at 14:31

answered Apr 08 '19 at 14:24

IronmanX46

558
7
16

Marek Manduch · Answer 11 · 2019-10-14T08:10:18.377

1

Nothing from the previous answers is working?

It may happen that the size of the UIImageView is bigger than the image size. Corner radius can be set well but not visible in that case.

Quick check of the UIImageView size by code: (or can use "View UI Hierarchy" tool in XCode)

self.imageView.backgroundColor = [UIColor greenColor];

In this scenario you should assure that UIImageView has the same aspect ratio as the image.

edited Oct 14 '19 at 08:10

answered Oct 14 '19 at 07:56

Marek Manduch

2,303
1
19
22

This was my problem - setting the color showed me that it was working but my image was smaller than my image view. In my case I ended up making the background color match the background of the image so it looks rounded – devjme Feb 09 '22 at 21:30

Maulik Patel · Answer 12 · 2017-11-18T07:16:50.527

-(void) viewDidAppear:(BOOL)animated{
       [super viewDidAppear:animated];
       [self setMaskTo:viewDistance 
             byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight];
           }

- (void)setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners
     {
      UIBezierPath *rounded = [UIBezierPath 
                bezierPathWithRoundedRect:view.bounds
                                              byRoundingCorners:corners

                     cornerRadii:CGSizeMake(20.0, 20.0)];

          CAShapeLayer *shape = [[CAShapeLayer alloc] init];
          shape.frame = self.view.bounds;
         [shape setPath:rounded.CGPath];
          view.layer.mask = shape;
       }

Ildar · Answer 13 · 2023-01-12T15:26:04.560

0

You can use this code

override func viewDidLayoutSubviews() { 
    yourImageView.layer.cornerRadius = yourImageView.frame.width / 2
}

edited Jan 12 '23 at 15:26

answered Jan 12 '23 at 14:31

Ildar

1
1

Setting Corner Radius on UIImageView not working

13 Answers13

Linked