Add just a top border to an UIView with Quartzcore/layer?

Question

Is it possible to add a border just on top of a UIView, if so, how please?

you can set view.layer.bordercolor and borderwidth, bordercolor — rakeshNS, Jul 12 '13 at 06:56
No sorry, your solution add a border for all view , not for ONLY top of UIView !!! — GilbertOOl, Jul 12 '13 at 07:02
we can set border on one side of UIView, this post may be helpful http://stackoverflow.com/questions/11236607/uiview-set-only-side-borders — rakeshNS, Jul 12 '13 at 07:05
possible duplicate of [UIView bottom border?](http://stackoverflow.com/questions/7666863/uiview-bottom-border) — Cœur, Aug 03 '15 at 10:31
try this https://stackoverflow.com/questions/17355280/how-to-add-a-border-just-on-the-top-side-of-a-uiview/48293635#48293635 — Datt Patel, Jan 17 '18 at 04:38

score 98 · Answer 1 · edited Jun 29 '16 at 09:27

98

I just Testing Bellow few line of Code and it works very nice, just test it in to your Project. hope you'll get your solution easily.

Why to create new View and adding it into your existing view..? For this task simply create one CALayer and add it into your existing UIView's Layer do as following:-

#import <QuartzCore/QuartzCore.h>
- (void)viewDidLoad
{
    CALayer *TopBorder = [CALayer layer];
    TopBorder.frame = CGRectMake(0.0f, 0.0f, myview.frame.size.width, 3.0f);
    TopBorder.backgroundColor = [UIColor redColor].CGColor;
    [myview.layer addSublayer:TopBorder];

  [super viewDidLoad];

}

and It's Output is:-

enter image description here

edited Jun 29 '16 at 09:27

Akshay

227
2
13

answered Jul 12 '13 at 07:19

Nitin Gohel

49,482
17
105
144

2

One more precision, your solution instead mine solution manages badly autorotation ! – GilbertOOl Jul 12 '13 at 08:17
2

A UIView will do that at least equally well – Pascalius Dec 04 '13 at 10:44
1

Well no, you can do it _exactly_ like this with an UIView. – Pascalius Dec 04 '13 at 10:49
When the view changes its size (e.g. animation), the border is not getting resized. – Rafał Sroka Sep 22 '17 at 11:14

score 18 · Accepted Answer · answered Jul 12 '13 at 07:17

i've find solution for me, here's the tricks :

CGSize mainViewSize = self.view.bounds.size;
CGFloat borderWidth = 1;
UIColor *borderColor = [UIColor colorWithRed:37.0/255 green:38.0/255 blue:39.0/255 alpha:1.0];
UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, mainViewSize.width, borderWidth)];
topView.opaque = YES;
topView.backgroundColor = borderColor;
topView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;        
[self.view addSubview:topView];

This one is great if you need to worry about rotation. – werm098 Apr 26 '14 at 00:52 — werm098, Apr 26 '14 at 00:52

score 10 · Answer 3 · answered Feb 19 '16 at 21:01

10

GilbertOOI's answer in Swift 2:

let topBorder: CALayer = CALayer()
topBorder.frame = CGRectMake(0.0, 0.0, myView.frame.size.width, 3.0)
topBorder.backgroundColor = UIColor.redColor().CGColor
myView.layer.addSublayer(topBorder)

answered Feb 19 '16 at 21:01

brandonscript

68,675
32
163
220

score 6 · Answer 4 · answered Dec 31 '13 at 05:29

6

Here's a UIView category that lets you add a layer-back or view-backed border on any side of the UIView: UIView+Borders

answered Dec 31 '13 at 05:29

aroooo

4,726
8
47
81

dengApro · Answer 5 · 2017-12-18T02:38:19.953

5

GilbertOOI's answer in Swift 4:

let topBorder: CALayer = CALayer()
topBorder.frame = CGRect(x: 0, y: 0, width: myView.frame.size.width, height: 1)
topBorder.backgroundColor = UIColor.purple.cgColor
myView.layer.addSublayer(topBorder)

edited Dec 18 '17 at 02:38

answered Dec 18 '17 at 02:28

dengApro

3,848
2
27
41

n8tr · Answer 6 · 2014-11-10T12:30:44.020

I created this simple UIView subclass so that it works in Interface Builder and works with constraints: https://github.com/natrosoft/NAUIViewWithBorders

Here's my blog post about it: http://natrosoft.com/?p=55

-- Basically just drop in a UIView in Interface Builder and change its class type to NAUIViewWithBorders.
-- Then in your VC's viewDidLoad do something like:

/* For a top border only ———————————————- */
self.myBorderView.borderColorTop = [UIColor redColor];
self.myBorderView..borderWidthsAll = 1.0f;

/* For borders with different colors and widths ————————— */
self.myBorderView.borderWidths = UIEdgeInsetsMake(2.0, 4.0, 6.0, 8.0);
self.myBorderView.borderColorTop = [UIColor blueColor];
self.myBorderView.borderColorRight = [UIColor redColor];
self.myBorderView.borderColorBottom = [UIColor greenColor];
self.myBorderView.borderColorLeft = [UIColor darkGrayColor];

Here's a direct link to the .m file so you can see the implementation: NAUIViewWithBorders.m
There is a demo project as well.

Thanks for this one -- I found it really solid and simple to use, with a pleasantly simple implementation. — weienw, Nov 08 '14 at 23:22

score 2 · Answer 7 · answered Mar 26 '16 at 00:53

2

remus' answer in Obj-C:

 CALayer *topBorder = [CALayer new];
 topBorder.frame = CGRectMake(0.0, 0.0, self.frame.size.width, 3.0);
 topBorder.backgroundColor = [UIColor redColor].CGColor;
 [myView.layer addSublayer:topBorder];

answered Mar 26 '16 at 00:53

Andrew Bennett

910
11
11

score 0 · Answer 8 · answered Nov 01 '20 at 16:20

Swift5:

We will write a separate method to add borders to this view. To add borders to this view we will create two layers with the desired thickness. We will set the frame of these two layers to the top and bottom of the view. We will set the desired background color of the borders on these layers and add these layers as subLayers to the view.

func addTopBorders() {
   let thickness: CGFloat = 1.0
   let topBorder = CALayer()
   topBorder.frame = CGRect(x: 0.0, y: 0.0, width: 
   self.down_view_outlet.frame.size.width, height: thickness)
   topBorder.backgroundColor = UIColor.white.cgColor
   down_view_outlet.layer.addSublayer(topBorder)
}

Add just a top border to an UIView with Quartzcore/layer?

8 Answers8

Linked