Add a border outside of a UIView (instead of inside)

Question

If a add a border of a view using code in a view like

self.layer.borderColor = [UIColor yellowColor].CGColor;
self.layer.borderWidth = 2.0f;

the border is added inside the view like the following: enter image description here

the right view is the original view, as you can see, the black area of bordered view is less than the original one. but what I want to get is a border outside of original view, like this: enter image description here . the black area is equal to original one, how can I implement it?

score 106 · Accepted Answer · answered Mar 03 '13 at 09:23

106

Unfortunately, there isn't simply a little property you can set to align the border to the outside. It draws aligned to the inside because the UIViews default drawing operations draw within its bounds.

The simplest solution that comes to mind would be to expand the UIView by the size of the border width when applying the border:

CGFloat borderWidth = 2.0f;

self.frame = CGRectInset(self.frame, -borderWidth, -borderWidth);
self.layer.borderColor = [UIColor yellowColor].CGColor;
self.layer.borderWidth = borderWidth;

answered Mar 03 '13 at 09:23

Elliott James Perry

4,528
1
21
38

I have used this on the view of the uitableviewcell. but on the line, self.frame = CGRectInset(self.frame, -borderWidth, -borderWidth); The view width and height is keep on increasing if we do keep scroll the tableview.. So I ended up by removing it. – Neela Jun 09 '15 at 13:43
This method keep increasing view height so i remove this code and use the following code self.view.layer.borderColor = [[UIColor colorWithRed:209.0f/255.0f green:33.0f/255.0f blue:8.0f/255.0f alpha:1.0f] CGColor]; self.view.layer.borderWidth = 1.0f; – Rizwan Shah Jul 05 '15 at 13:19
4

Tried this solution in Swift, does not work unfortunately, the border keeps drawing inside the UIImageView – theDC Feb 08 '16 at 12:29
If this code is inside a method that is called multiple times, then it will keep on increasing in size because self.frame reiterates itself. To prevent this, declare a property to store self.frame and set it in viewDidload. for example, _originalSize = self.frame; where originalSize is a CGRect property. Then change the code to self.frame = CGRectInset(_originalSize, -borderWidth, -borderWidth); – GeneCode Feb 13 '16 at 00:48
When this is implemented in ViewDidLoad, the view auto resizes to the screen size (i.e. the view resizes to the original size and thus the border becomes visible). If it is implemented in ViewDidAppear, it doesn't create a border at all outside the original view. Any thoughts on how to implement it so that the border is created outside the original view AND the view doesn't resize? – JeffB6688 Aug 19 '16 at 20:13
This may be related to auto layout, but I don't think I want to turn off auto layout for fear that I'll break something such that the UI won't work for all screen sizes. Is there a way to accomplish this without breaking the view for all screen sizes? – JeffB6688 Aug 19 '16 at 20:21
Please Update: 'CGRectInset' has been replaced by instance method 'CGRect.insetBy(dx:dy:)'. thx – Peter Kreinz Nov 07 '17 at 10:15

Hugues Duvillier · Answer 2 · 2015-11-06T10:50:32.410

Ok, there already is an accepted answer but I think there is a better way to do it, you just have to had a new layer a bit larger than your view and do not mask it to the bounds of the view's layer (which actually is the default behaviour). Here is the sample code :

CALayer * externalBorder = [CALayer layer];
externalBorder.frame = CGRectMake(-1, -1, myView.frame.size.width+2, myView.frame.size.height+2);
externalBorder.borderColor = [UIColor blackColor].CGColor;
externalBorder.borderWidth = 1.0;

[myView.layer addSublayer:externalBorder];
myView.layer.masksToBounds = NO;

Of course this is if you want your border to be 1 unity large, if you want more you adapt the borderWidth and the frame of the layer accordingly. This is better than using a second view a bit larger as a CALayer is lighter than a UIView and you don't have do modify the frame of myView, which is good for instance if myView is aUIImageView

N.B : For me the result was not perfect on simulator (the layer was not exactly at the right position so the layer was thicker on one side sometimes) but was exactly what is asked for on real device.

EDIT

Actually the problem I talk about in the N.B was just because I had reduced the screen of the simulator, on normal size there is absolutely no issue

Hope it helps

myView.layer.masksToBounds = NO; it is creating problem when myView has CornerRadius. — umakanta, Jun 29 '17 at 07:10
.masksToBounds = no // this will also overflow your image if it's scaling mode is aspectFill — iOS Blacksmith, Oct 16 '20 at 11:16

score 23 · Answer 3 · answered Nov 07 '17 at 22:48

With the above accepted best answer i made experiences with such not nice results and unsightly edges:

So i will share my UIView Swift extension with you, that uses a UIBezierPath instead as border outline – without unsightly edges (inspired by @Fattie):

//  UIView+BezierPathBorder.swift

import UIKit

extension UIView {

    fileprivate var bezierPathIdentifier:String { return "bezierPathBorderLayer" }

    fileprivate var bezierPathBorder:CAShapeLayer? {
        return (self.layer.sublayers?.filter({ (layer) -> Bool in
            return layer.name == self.bezierPathIdentifier && (layer as? CAShapeLayer) != nil
        }) as? [CAShapeLayer])?.first
    }

    func bezierPathBorder(_ color:UIColor = .white, width:CGFloat = 1) {

        var border = self.bezierPathBorder
        let path = UIBezierPath(roundedRect: self.bounds, cornerRadius:self.layer.cornerRadius)
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask

        if (border == nil) {
            border = CAShapeLayer()
            border!.name = self.bezierPathIdentifier
            self.layer.addSublayer(border!)
        }

        border!.frame = self.bounds
        let pathUsingCorrectInsetIfAny =
            UIBezierPath(roundedRect: border!.bounds, cornerRadius:self.layer.cornerRadius)

        border!.path = pathUsingCorrectInsetIfAny.cgPath
        border!.fillColor = UIColor.clear.cgColor
        border!.strokeColor = color.cgColor
        border!.lineWidth = width * 2
    }

    func removeBezierPathBorder() {
        self.layer.mask = nil
        self.bezierPathBorder?.removeFromSuperlayer()
    }

}

Example:

let view = UIView(frame: CGRect(x: 20, y: 20, width: 100, height: 100))
view.layer.cornerRadius = view.frame.width / 2
view.backgroundColor = .red

//add white 2 pixel border outline
view.bezierPathBorder(.white, width: 2)

//remove border outline (optional)
view.removeBezierPathBorder()

good way of thinking but your border is still "inside" so this need to be fixed to be outline :) — Serj Rubens, Aug 16 '20 at 11:19

picciano · Answer 4 · 2017-12-19T15:21:28.877

For a Swift implementation, you can add this as a UIView extension.

extension UIView {

    struct Constants {
        static let ExternalBorderName = "externalBorder"
    }

    func addExternalBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.whiteColor()) -> CALayer {
        let externalBorder = CALayer()
        externalBorder.frame = CGRectMake(-borderWidth, -borderWidth, frame.size.width + 2 * borderWidth, frame.size.height + 2 * borderWidth)
        externalBorder.borderColor = borderColor.CGColor
        externalBorder.borderWidth = borderWidth
        externalBorder.name = Constants.ExternalBorderName

        layer.insertSublayer(externalBorder, atIndex: 0)
        layer.masksToBounds = false

        return externalBorder
    }

    func removeExternalBorders() {
        layer.sublayers?.filter() { $0.name == Constants.ExternalBorderName }.forEach() {
            $0.removeFromSuperlayer()
        }
    }

    func removeExternalBorder(externalBorder: CALayer) {
        guard externalBorder.name == Constants.ExternalBorderName else { return }
        externalBorder.removeFromSuperlayer()
    }

}

Excellent! Thank you! Some things are changed in Swift 4 and now looks different, but Xcode explains how to modify code. And in method 'removeExternalBorder' must be 'guard externalBorder.name == '. — DmitryKanunnikoff, Aug 15 '17 at 11:59

score 13 · Answer 5 · answered Mar 03 '13 at 12:08

Well there is no direct method to do it You can consider some workarounds.

Change and increase the frame and add bordercolor as you did
Add a view behind the current view with the larger size so that it appears as border.Can be worked as a custom class of view

If you dont need a definite border (clearcut border) then you can depend on shadow for the purpose

[view1 setBackgroundColor:[UIColor blackColor]];
UIColor *color = [UIColor yellowColor];
view1.layer.shadowColor = [color CGColor];
view1.layer.shadowRadius = 10.0f;
view1.layer.shadowOpacity = 1;
view1.layer.shadowOffset = CGSizeZero;
view1.layer.masksToBounds = NO;

score 2 · Answer 6 · answered Mar 03 '13 at 09:20

Increase the width and height of view's frame with border width before adding the border:

float borderWidth = 2.0f
CGRect frame = self.frame;
frame.width += borderWidth;
frame.height += borderWidth;
 self.layer.borderColor = [UIColor yellowColor].CGColor;
 self.layer.borderWidth = 2.0f;

score 1 · Answer 7 · answered Jun 29 '18 at 04:51

I liked solution of @picciano If you want exploding circle instead of square replace addExternalBorder function with:

func addExternalBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.white) {
        let externalBorder = CALayer()
        externalBorder.frame = CGRect(x: -borderWidth, y: -borderWidth, width: frame.size.width + 2 * borderWidth, height: frame.size.height + 2 * borderWidth)
        externalBorder.borderColor = borderColor.cgColor
        externalBorder.borderWidth = borderWidth
        externalBorder.cornerRadius = (frame.size.width + 2 * borderWidth) / 2
        externalBorder.name = Constants.ExternalBorderName
        layer.insertSublayer(externalBorder, at: 0)
        layer.masksToBounds = false

    }

score 1 · Answer 8 · answered Mar 16 '19 at 01:46

There is actually a very simple solution. Just set them both like this:

view.layer.borderWidth = 5

view.layer.borderColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).cgColor

view.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.25).cgColor

score 1 · Answer 9 · answered Nov 25 '19 at 09:42

Swift 5

extension UIView {
    fileprivate struct Constants {
        static let externalBorderName = "externalBorder"
    }

    func addExternalBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.white) -> CALayer {
        let externalBorder = CALayer()
        externalBorder.frame = CGRect(x: -borderWidth, y: -borderWidth, width: frame.size.width + 2 * borderWidth, height: frame.size.height + 2 * borderWidth)
        externalBorder.borderColor = borderColor.cgColor
        externalBorder.borderWidth = borderWidth
        externalBorder.name = Constants.ExternalBorderName

        layer.insertSublayer(externalBorder, at: 0)
        layer.masksToBounds = false

        return externalBorder
    }

    func removeExternalBorders() {
        layer.sublayers?.filter() { $0.name == Constants.externalBorderName }.forEach() {
            $0.removeFromSuperlayer()
        }
    }

    func removeExternalBorder(externalBorder: CALayer) {
        guard externalBorder.name == Constants.externalBorderName else { return }
        externalBorder.removeFromSuperlayer()
    }
}

score 0 · Answer 10 · answered Jan 29 '19 at 07:19

I liked solution of @picciano & @Maksim Kniazev. We can also create annular border with following:

func addExternalAnnularBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.white) {
    let externalBorder = CALayer()
    externalBorder.frame = CGRect(x: -borderWidth*2, y: -borderWidth*2, width: frame.size.width + 4 * borderWidth, height: frame.size.height + 4 * borderWidth)
    externalBorder.borderColor = borderColor.cgColor
    externalBorder.borderWidth = borderWidth
    externalBorder.cornerRadius = (frame.size.width + 4 * borderWidth) / 2
    externalBorder.name = Constants.ExternalBorderName
    layer.insertSublayer(externalBorder, at: 0)
    layer.masksToBounds = false
}

score 0 · Answer 11 · answered Oct 28 '19 at 21:50

How I placed a border around my UI view (main - SubscriptionAd) in Storyboard is to place it inside another UI view (background - BackgroundAd). The Background UIView has a background colour that matches the border colour i want, and the Main UIView has constraints value 2 from each side.

I will link the background view to my ViewController and then turn the border on and off by changing the background colour.

Add a border outside of a UIView (instead of inside)

11 Answers11

Linked