Easy rounded corners on UITableViewCell image view

Here’s a relatively easy way to achieve rounded corners on the standard image view in a UITableViewCell:

cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 5.0;

Set this up when you create the cell (make sure you #import <QuartzCore/QuartzCore.h> at the top, of course). It would appear the UIImageView control creates sublayers to display the actual image content, which is why we use the masksToBounds property to then clip any sublayers.

I noticed a lot of people are seeking answers to the silly behaviour of UITableView with the grouped (UITableViewStyleGrouped) style and images:

Images not clipped to rounded cell border

Images don’t get clipped to the rounded cell border, which looks nasty. This technique is one way to remedy that:

Rounded borders now stay within rounded cell edge

One caveat – due to the inexplicable way the image view within the table view cell scales image content, there’s not really a simple, sensible way to provide an inset margin from the table view cell boundary to complement this rounded border effect.

I tried setting the frame property of the UIImageView itself (cell.imageView.frame), as well as setting the frame of the image view’s layer. I also tried applying a scale transform to the layer, with strangely inconsistent results: Setting scale to, say, 50%, made the image view 40x40px, only a pixel or two smaller than the full size. This may be because another entity (the table view cell?) performs scaling of the content, instead of the actual image view; given that my original image was 80×80, a 50% scale would result in 40×40.

My solution was to steer clear of that nonsense and just provide appropriately scaled images straight to the image view. Here’s a simple category on UIImage to scale an image:

@interface UIImage (TPAdditions)
- (UIImage*)imageScaledToSize:(CGSize)size;
@implementation UIImage (TPAdditions)
- (UIImage*)imageScaledToSize:(CGSize)size {
    [self drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    return image;

So, then I just do something like this in the UITableView data provider:

UIImage *image = account.image;
if ( image ) {
   cell.image = [image imageScaledToSize:CGSizeMake(38, 38)];



, , . Bookmark the permalink. Both comments and trackbacks are currently closed.


  1. David
    Posted March 18, 2010 at 9:04 pm | Permalink

    I found this article via Google search while investigating my own dissatisfaction with this method, which I discovered earlier today. The problem I’m experiencing is a noticeable degradation in the quality of the UITableView scrolling. Mind you, the scrolling is still responsive. However, there is a perceptible jerkiness or flicker to the result that bothered me enough to comment out the lines until I can come up with a better solution. It was as though the corner clipping was being performed repeatedly (albeit quickly) as the table cells scrolled.

    In addition to adding a cornerRadius to the images CALayer, I also set a borderColor and borderWidth to frame the image. Maybe this was too much. I’ll explore just the rounding without the border and see how I like the result.

    Anyone else observe the same thing?

    • Posted March 19, 2010 at 11:59 am | Permalink

      Hi David – it sounds like your theory is right, that it’s not caching the rendered image, but performing the rendering each time, which may be fairly time-consuming.

      It may be worth considering rendering the image with rounded corners yourself and just providing the image view with the finished image.

  2. Posted May 5, 2010 at 10:54 pm | Permalink

    Hi Michael,

    This is exactly what I was looking for after trying a multitude of other settings. Unfortunately it doesn’t work. Any clue as to why? I added QuartzCore framework, and am importing it. Setting the properties as you’ve got them in the part of the cellForRowAtIndexPath right after the cell is created but before it’s returned.

    I’ve got a custom table cell built with IB containing a UIImageView, flush left, that’s not getting its corners rounded. Any ideas would be appreciated.

    Meanwhile, I’ve had to add a category to UIImage to round the corners, but it doesn’t match the borders of the cell exactly.

    Would love to hear if anyone else is having the same issue, or any ideas.

    • Posted May 29, 2010 at 2:51 pm | Permalink

      Hi Alec – Sorry about the delay in responding!

      It’s hard to take a stab at what might be wrong – have you made sure that the UIImageView is hooked up correctly in IB, and it isn’t just a nil pointer?

  3. Peter
    Posted June 11, 2010 at 1:33 pm | Permalink

    Like David I’ve found that the scrolling performance is seriously affected if you apply this rounding to many table view cells. For the odd one or two cells it’s a great tip – I’d already used this technic to add round corners to a map view.

  4. Chris
    Posted July 17, 2010 at 6:01 pm | Permalink

    Boy this saved me a lot of research – exactly what I needed after being frustrated by being not able to change the UIImageView’s frame and not wanting to create a custom UITableViewCell since this standard view has everything I need. Thanks Michael!

  5. khaleeel
    Posted August 18, 2010 at 1:19 pm | Permalink

    hai michael ,i have a small problem in using custom classes.

    how to use custom classes while we r using it for “UITouch”

    am problems in touchesMoved & touches Begin

    • Posted August 18, 2010 at 1:51 pm | Permalink

      I’m afraid I don’t understand your question, Khaleeel – would you rephrase? What are you trying to do?

  6. Posted August 20, 2010 at 8:32 am | Permalink

    Hi Michael,

    I came to the same solution as you, but I get into trouble when I build the app for the new iPhone 4. The images start to look very pixalated. This is because the iPhone 4 scales the images to support the new resolution (they probably get twice as big).

    Did you try to get a solution for this? Or do you know how to solve this, without actually creating your own custom UITableViewCell?

  7. Posted September 16, 2010 at 12:47 pm | Permalink

    Thank you for the quick tip on rounding images in a table – i was forgetting to mask and your post saved the day!

  8. Philip
    Posted October 20, 2010 at 1:36 pm | Permalink

    Another simple solution that I could not find anywhere but stumbled across in the documentation is simply moving the image. For some reason, setting the frame does not move the image; however, there are 2 properties indentationLevel and indentationWidth that set the cell margin. I found setting cell.indentationLevel = 1 and leaving the indentationWidth the default value pushes the image over enough to avoid the rounded corners and does not have any performance impact.

  9. Joshua Kaden
    Posted October 29, 2010 at 9:05 pm | Permalink

    This was extremely helpful; thank you!

  10. Posted December 2, 2010 at 3:10 pm | Permalink

    Here’s an aspect-ratio-preserving version:

    @interface UIImage (TPAdditions)
    - (UIImage*)imageScaledToSize:(CGSize)size;

    @implementation UIImage (TPAdditions) - (UIImage*)imageScaledToSize:(CGSize)size { double scaleFactor = fmax(fmax(self.size.width / size.width, self.size.height / size.height), 1);

    // Divide the size by the greater of the vertical or horizontal shrinkage factor
    double newWidth = self.size.width / scaleFactor;
    double newHeight = self.size.height / scaleFactor;

    // Then figure out if you need to offset it to center vertically or horizontally float leftOffset = (size.width - newWidth) / 2; float topOffset = (size.height - newHeight) / 2;

    CGRect newRect = CGRectMake(leftOffset, topOffset, newWidth, newHeight);

    UIGraphicsBeginImageContext(size); [self drawInRect:newRect]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image;

    } @end

  11. AD
    Posted January 17, 2011 at 8:32 am | Permalink

    Where do you put the image category additions +UIImage (TPAdditions)?

    Do you put it in its own file and include it?

    • Posted January 17, 2011 at 10:59 am | Permalink

      That’s right, with the interface section in the header file

  12. indiekiduk
    Posted January 18, 2011 at 10:38 am | Permalink

    cell.imageView.contentMode = UIViewContentModeScaleAspectFit;


  13. Posted February 27, 2011 at 2:31 am | Permalink

    “One caveat – due to the inexplicable way the image view within the table view cell scales image content, there’s not really a simple, sensible way to provide an inset margin from the table view cell boundary to complement this rounded border effect.” The UITableViewCell is laying out the image, text and detailText to its contentView, so if you want to change the size of the imageView you can override -layoutSubviews method of UITableView to adjust the size of the subviews. Remember to call the super implementation prior to do anything. Nice blog!

    • Posted February 27, 2011 at 10:57 am | Permalink

      Good to know! Thanks, Emanuel.

  14. riash
    Posted March 14, 2011 at 6:19 am | Permalink

    Hi Michael, you did a smart way to display the imageview in tableview cell. i had one problem to showing cclabel above on cell.imageview.image. in my game i used the UITableView to display menu. i displayed image on the left side of the cell and want to show the level on the image so i use cclabel . when i select the row which is highlighted as well as the image highlighted . but the level doesn’t display. in normal mode it display , when row was selected the highlighted image display above on the label. in cocos2d there is Z-index to order the image. but in cocoa touch how to order display of images.

    sample code: cell.imageView.image = score==0?[UIImage imageNamed:@”LLock.png”]: [UIImage imageNamed:@”LLevelIndicator.png”];

    cell.imageView.highlightedImage= score==0?[UIImage imageNamed:@”LLock.png”]:[UIImage imageNamed:@”LLevelIndicatorHighlighted.png”];

    levelLabel.text = score==0?nil:[NSString stringWithFormat:@”%ld”,[indexPath row]];

  15. dacrow
    Posted May 21, 2011 at 8:00 pm | Permalink

    hey michael, I saw your example above about the uitableviewcells with the rounded images. in your example pictures it looks like you use a UITableViewStyleGrouped with just one element per section.

    I like that and I tried to do the same.

    my problem: I don’t want rounded corners of the uitableviewcell. I tried cell.layer.masksToBounds = YES; cell.layer.cornerRadius = 0.0;

    but the cell still has a rounded border instead of an angular one. how to make them not rounded?

    • Posted May 21, 2011 at 8:04 pm | Permalink

      Hmm, yes, I think that’s custom drawing or something – you’ll probably need to make your own view, with custom appearance (possibly just a UIView with its backing layer’s attributes set appropriately – a white background and a border), and set it as the cell’s background view. You’ll also want to set views for the appropriate states too (e.g. selected)

      • dacrow
        Posted May 22, 2011 at 12:30 pm | Permalink

        yeah, your suggestions work ! thank you so much ;)

  16. Posted May 24, 2011 at 7:27 pm | Permalink

    For things like this I like to use a custom UITableViewCell all together, that implements my own UIImageView property that I can manipulate however I want without getting weird results.

    Using a custom cell as well as a custom object that handles the data within the cell I was able to make an extremely fast asynchronous multi-threaded cell loading system that not only displayed the cells to my liking, but once loaded, scrolled smoothly.

    Its too much code to post here, but its pretty simple to do, just make a subclass of UITableViewCell and add a UIImageView property to it, use this property to set your image, and you’ll be able to manipulate it however you want.

  17. Dave
    Posted July 10, 2011 at 9:01 pm | Permalink

    Thanks man. Luckily, I found your site. I would have never known to add the framework and set the maskToBounds to YES. Thanks again.

  18. Holger
    Posted August 8, 2011 at 8:48 am | Permalink

    Exactly what I was looking for. Thank you!

  19. camden_kid
    Posted October 13, 2011 at 9:06 am | Permalink

    Very cool.


  20. Posted December 8, 2011 at 4:43 pm | Permalink

    Thank you for your code – rounded corners look great!

    The only problem is that it’s not working so well on iPhone 4’s retina display – it’s better to scale image on transparent background, keeping the same original size:

    -(UIImage)imageScaledTo:(CGFloat)scale { // for standard image in table use scale = 0.8 UIGraphicsBeginImageContext(self.size); [self drawInRect:CGRectMake(0.5self.size.width(1-scale), 0.5self.size.height(1-scale), self.size.widthscale,self.size.height*scale)]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; }

    • Posted December 8, 2011 at 4:54 pm | Permalink

      sorry, it’s not working – it looks good but actually rounded corners disapear :-(

  21. Posted December 17, 2011 at 1:08 pm | Permalink

    Hi Michael

    That was a best solution. Could you please suggest how to acheive a kind of ’embossed’ image (little inset …)

    Thanks HRS

  22. Kai
    Posted July 4, 2012 at 4:17 pm | Permalink

    Thanks HRS!

    For Retina support, use: UIGraphicsBeginImageContextWithOptions(size, YES, 2);

  23. AllDmeat
    Posted September 23, 2012 at 5:17 pm | Permalink

    I’m new at Xcode and Obj-C and i’ve got a little problem using your code. You have this in your code: UIImage *image = account.image;

    What should i change it to? Right now i have this and my app is crashing. UIImage *image = @”testimg.png”;

    • Posted September 24, 2012 at 1:46 pm | Permalink

      UIImage *image = [UIImage imageNamed:@"testimg.png"];