Take the 2-minute tour ×

Is it possible to add a border style to a UITableView?

Not just bordercolor and borderwidth.

For example a grooved border style?

share|improve this question
I guess you need to use UITableViewCell. –  RomanHouse Mar 29 '12 at 8:26
you can give rounded effect to TableView –  Sanket Pandya Mar 29 '12 at 8:32
just google how to create custom UITableViewCells. It should help you –  Novarg Mar 29 '12 at 8:33
@Novarg I am using a Grouped table so using UITableViewCells will not help. Thanks for the advise though. +1. –  Popeye Mar 29 '12 at 8:35
@JohnDude just add a few checks in the cellForRowAtIndexPath. If it's the first cell, then do something; if it's the last cell then do something else and if it's none of these then make something different. So in your case I'd add the borders on the sides and top to the first cell, sides and bottom to the last cell and only sides to all the other cells –  Novarg Mar 29 '12 at 9:06
show 2 more comments

5 Answers

up vote 8 down vote accepted

Hey You can give border to your views using CALayer which is available in QuartzCore Framework

Following link will help you to understand CALayer in detail.

Introduction to CALayers Tutorial

For example from the above link,

// Import QuartzCore.h at the top of the file
#import <QuartzCore/QuartzCore.h>

// In viewDidLoad add the following lines
self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;
self.view.layer.cornerRadius = 20.0;
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);

CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor;
sublayer.shadowOffset = CGSizeMake(0, 5);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 1.0;
sublayer.frame = CGRectMake(30, 30, 128, 192);
[self.view.layer addSublayer:sublayer];

Though above code will not give you exact grooved effect. But you can try with it.

share|improve this answer
add comment

Try to this code may be helped you....

Written on this code in your view did load methods and import the QuartzCore framework in the your .h file or .m file.

[myTBL.layer setBorderWidth: 1.0];
[myTBL.layer setCornerRadius:8.0f];
[myTBL.layer setMasksToBounds:YES];
[myTBL.layer setBorderColor:[[UIColor blackColor] CGColor]];

Happy coding.....

share|improve this answer
This is basically what I have at the moment. But it doesn't add a grooved style are anything like that it just adds a border width of 1 and with corners of 8 and a the border is black. Thanks +1 but I did say not just with bordercolor and borderwidth. –  Popeye Mar 29 '12 at 8:47
if you are not defined the border color and border width,i think dose not possible.but one trick Clear the background color and use the image in the background in table view. –  i Developer Mar 29 '12 at 8:54
I have just read my last comment back to myself and it sounds like I was being a bit of a ****, I did not mean it to sound that way sorry. Back to topic I know how to create generic borders like that but I thought maybe I could add a bit of style to it. I was thinking of an image but I never know how many cells there will be in the table so I could never get a fixed image for the border, it will always be changing. –  Popeye Mar 29 '12 at 9:09
add comment

The most flexible way is to make your UITableView a subview of a UIImageView and use a stretchable image to render the border styling. Inset your UITableView within the UIImageView to give the required space for your border on all sides.

Create a small square image as a PNG with a transparent background and any etching, shadow, or border style that you want.

Then turn it into a stretchable image using the method below. This takes an image name and returns a stretchable image that will preserve your styling when you resize it:

- (UIImage*)makeStretchableImageNamed:(NSString*)imageName
    UIImage *image = [UIImage imageNamed:imageName];
    CGSize size = image.size;
    image = [image stretchableImageWithLeftCapWidth:size.width / 2.0f topCapHeight:size.height / 2.0f];

    return image;

Use the image to set the image property of your UIImageView and set the contentMode property to UIViewContentModeScaleToFill.

share|improve this answer
This solution worked best for me -the only issue is that the very last cell border isn't styled (any reason why). –  Toran Billups Apr 12 '12 at 11:00
UIView* detailsView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 54)]; UIImageView* imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 2)]; UIImage *image = [UIImage imageNamed:@"border.png"]; CGSize size = image.size; image = [image stretchableImageWithLeftCapWidth:size.width / 2.0f topCapHeight:size.height / 2.0f]; [imgView setImage:image]; [detailsView addSubview:imgView]; –  Toran Billups Apr 12 '12 at 11:00
I was able to get this working but it required another UIImageView at the bottom of the cell (how can I avoid doing 2 UIImageViews) –  Toran Billups Apr 12 '12 at 11:11
... UIImageView* imgView2 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 54, 320, 2)]; image = [image stretchableImageWithLeftCapWidth:size.width / 2.0f topCapHeight:size.height / 2.0f]; [imgView2 setImage:image]; [detailsView addSubview:imgView2]; –  Toran Billups Apr 12 '12 at 11:12
Are you using this to style individual cells? It's not clear from your comments but the original question and my answer both refer to styling the border around the whole table, not individual cells. –  Robin Summerhill Apr 12 '12 at 11:15
show 1 more comment

What you can do is Get the Image of the Texture and Put that Image in UIImageView and then add TableView in the Imageview like it shows the Image from all sides...

share|improve this answer
Its not the cleanest way of doing it but it is possible. –  Popeye Mar 29 '12 at 9:34
add comment

You can't set the style, but you can simulate a pattern like a dotted line by using a pattern image and a UIColor.

UIView *item;
item.layer.borderColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"checkerboard.png"]].CGColor;

Don't forget to add this to your headers:

#import <QuartzCore/QuartzCore.h>
share|improve this answer
add comment

Your Answer


