How to add 3 sided border for an image in iOS

Question

I want to add border for an image. I don't want to add it completely on 4 sides. I want to add border only on particular 3 sides i.e., top,left & bottom. How to do that?

[imageView.layer setBorderColor:[[UIColor clearColor] CGColor]];

This would set the border on 4 sides of the image. But I want it only on 3 sides. How to do that?

try this :- https://stackoverflow.com/questions/7666863/uiview-bottom-border/48109396#48109396 — Datt Patel, Feb 01 '18 at 13:45

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

You’ll need to add colored subviews on the edges that you want to have borders. See this answer—for the border on the top, follow the same pattern, but use an autoresizingMask of UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin.

edited May 23 '17 at 12:04

Community

1
1

answered Jul 17 '12 at 17:23

Noah Witherspoon

57,021
16
130
131

score 1 · Answer 2 · answered Jul 17 '12 at 17:24

1

Make sure that the UIImageView has its clipsToBounds set to YES. Create a UIView that is the one border width wider than the image. Set the border on that layer to have the desired color. Set the frame of this view to 0,0, imageWidth+border, image.height and set masksToBounds = YES. Add this as a subview to your UIImageView. It should put a border around all but the right hand side.

answered Jul 17 '12 at 17:24

David H

40,852
12
92
138

I don't want to use subviews because, I am using that imageView as thumbnails, When that particular thumb nail is selected I should highlight the combination of two images with a single border. Actually I want to use two place two images side by side with one border.. – Bharath Jul 17 '12 at 17:29
1

Well then you could create one UIView, add both images as subviews to this with frames that place them side by side, make this view a bit larger (and inset the images), then in this container view set the layer border. 2x the border + the image dimension would be the proper dimension for the container view. – David H Jul 17 '12 at 17:49

score 0 · Answer 3 · answered Jul 17 '12 at 17:25

0

You could draw a filled CALayer that is 2px higher and 1px wider behind the actual image layer. Set the frame to be 1px above and to the left of your image.

answered Jul 17 '12 at 17:25

Torsten Walter

5,614
23
26

score 0 · Answer 4 · answered May 19 '13 at 14:00

manipulate the view with shadow and this is done easy peasy

_topInfoView.layer.masksToBounds = NO;
_topInfoView.layer.shadowOffset = CGSizeMake(0, 1);
_topInfoView.layer.shadowColor = [[UIColor grayColor]CGColor];
_topInfoView.layer.shadowRadius = 0.27f;
_topInfoView.layer.shadowOpacity = 0.6;

How to add 3 sided border for an image in iOS

4 Answers4