How to set the custom border color of UIView programmatically?

Question

I am trying to set the custom border color of UIView programmatically in Swift.

Show the relevant code in your question. Explain what issue you are having. — rmaddy, Apr 17 '15 at 13:45
possible duplicate of [Cocoa Touch: How To Change UIView's Border Color And Thickness?](http://stackoverflow.com/questions/3330378/cocoa-touch-how-to-change-uiviews-border-color-and-thickness) you just need to use it in swifty way — Inder Kumar Rathore, Apr 17 '15 at 13:55

score 225 · Accepted Answer · edited Jan 24 '19 at 14:42

225

If you Use Swift 2.0+

self.yourView.layer.borderWidth = 1
self.yourView.layer.borderColor = UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor

edited Jan 24 '19 at 14:42

NikxDa

4,137
1
26
48

answered Apr 17 '15 at 13:55

Shashi Verma

3,760
3
12
19

Note: this didnt seem to work for me (perhaps because I'm on swift 3.1?). Paras Joshi's (https://stackoverflow.com/a/29701061/225813) version did work though – Ashley Coolman Aug 24 '17 at 18:15
I edited my answer . it sure to work for you .. Ashley Coolman – Shashi Verma Aug 25 '17 at 05:38
2

You do not need to call init explicitly in swift 3. – ibrahimab Sep 10 '17 at 23:32
Is it possible to use more than one color ? – Gökhan Çokkeçeci Mar 28 '18 at 08:20
4

Is there any difference between your two versions? – Fogmeister Aug 30 '18 at 13:15
For me it was weird because I was doing this but in reverse order. It seems to matter and if you set the color before the border width it doesn't show. At least it seemed to be the case... All working now. I am calling layer.borderWidth inside a method on my custom view which has a xib. – Eric Mentele Oct 29 '20 at 08:35

Paras Joshi · Answer 2 · 2019-02-09T06:06:49.513

97

In Swift 4 you can set the border color and width to UIControls using below code.

let yourColor : UIColor = UIColor( red: 0.7, green: 0.3, blue:0.1, alpha: 1.0 )
yourControl.layer.masksToBounds = true
yourControl.layer.borderColor = yourColor.CGColor
yourControl.layer.borderWidth = 1.0

< Swift 4, You can set UIView's border width and border color using the below code.

yourView.layer.borderWidth = 1

yourView.layer.borderColor = UIColor.red.cgColor

edited Feb 09 '19 at 06:06

answered Apr 17 '15 at 13:46

Paras Joshi

20,427
11
57
70

1

@ShashiVerma you are welcome. For deep detail about layers, read apple's different object's class reference documents, so that is also helpful for you :) – Paras Joshi Apr 17 '15 at 13:53

Supratik Majumdar · Answer 3 · 2016-11-15T05:03:29.853

17

Use @IBDesignable and @IBInspectable to do the same.

They are re-useable, easily modifiable from the Interface Builder and the changes are reflected immediately in the Storyboard

Conform the objects in the storyboard to the particular class

Code Snippet:

@IBDesignable
class CustomView: UIView{

@IBInspectable var borderWidth: CGFloat = 0.0{

    didSet{

        self.layer.borderWidth = borderWidth
    }
}


@IBInspectable var borderColor: UIColor = UIColor.clear {

    didSet {

        self.layer.borderColor = borderColor.cgColor
    }
}

override func prepareForInterfaceBuilder() {

    super.prepareForInterfaceBuilder()
}

}

Allows easy modification from Interface Builder:

edited Nov 15 '16 at 05:03

answered Nov 15 '16 at 04:57

Supratik Majumdar

2,365
1
23
31

I like this solution more since it is a reusable one where we set the UIView to the customview but still leaves room more changes. – Jens Apr 07 '17 at 14:35
This was my favorite way to achieve it but with dark mode, it doesnt really work well. It gets the color style of current MacOS and uses static. But build in `@IBDesignable` and `@IBInspectable` all works well, so there should be a way for customs to use Color Assets with both dark/light mode too~ anyone knows how can achieve it? – Nomad Developer Nov 15 '19 at 05:55

score 15 · Answer 4 · edited Oct 03 '18 at 15:47

You can write an extension to use it with all the UIViews eg. UIButton, UILabel, UIImageView etc. You can customise my following method as per your requirement, but I think it will work well for you.

extension UIView{

    func setBorder(radius:CGFloat, color:UIColor = UIColor.clearColor()) -> UIView{
        var roundView:UIView = self
        roundView.layer.cornerRadius = CGFloat(radius)
        roundView.layer.borderWidth = 1
        roundView.layer.borderColor = color.CGColor
        roundView.clipsToBounds = true
        return roundView
    }
}

Usage:

btnLogin.setBorder(7, color: UIColor.lightGrayColor())
imgViewUserPick.setBorder(10)

@luda i don't think he/she has much of a choice about the api language! — worthwords, May 06 '17 at 20:41

score 15 · Answer 5 · answered Jun 14 '19 at 22:12

Swift 5.2, UIView+Extension

extension UIView {
    public func addViewBorder(borderColor:CGColor,borderWith:CGFloat,borderCornerRadius:CGFloat){
        self.layer.borderWidth = borderWith
        self.layer.borderColor = borderColor
        self.layer.cornerRadius = borderCornerRadius

    }
}

You used this extension;

yourView.addViewBorder(borderColor: #colorLiteral(red: 0.6, green: 0.6, blue: 0.6, alpha: 1), borderWith: 1.0, borderCornerRadius: 20)

you missed to add clipsToBounds = true – Eman Shedeed Jul 01 '20 at 04:50 — Eman Shedeed, Jul 01 '20 at 04:50

score 8 · Answer 6 · answered Sep 21 '17 at 11:24

8

swift 3

func borderColor(){

    self.viewMenuItems.layer.cornerRadius = 13
    self.viewMenuItems.layer.borderWidth = 1
    self.viewMenuItems.layer.borderColor = UIColor.white.cgColor
}

answered Sep 21 '17 at 11:24

Deepak Tagadiya

2,187
15
28

score 5 · Answer 7 · answered Mar 08 '18 at 18:20

We can create method for it. Simply use it.

public func createBorderForView(color: UIColor, radius: CGFloat, width: CGFloat = 0.7) {
    self.layer.borderWidth = width
    self.layer.cornerRadius = radius
    self.layer.shouldRasterize = false
    self.layer.rasterizationScale = 2
    self.clipsToBounds = true
    self.layer.masksToBounds = true
    let cgColor: CGColor = color.cgColor
    self.layer.borderColor = cgColor
}

score 4 · Answer 8 · answered Oct 13 '16 at 20:23

4

Swift 3.0

       groundTrump.layer.borderColor = UIColor.red.cgColor

answered Oct 13 '16 at 20:23

Вадим Башуров

41
3

Instead of adding a new answer, you must have sent an edit request to the original answerer – Rajan Maheshwari Oct 13 '16 at 20:32
@RajanMaheshwari Please no. Don't add code to other people's answers. Updates should be posted as their own, not into other answers. That way each poster is responsible for what they post... – Eric Aya Oct 14 '16 at 10:56
@EricAya it's not about updating the answer. It is an edit request, may be in comments to the answerer. Did you got what I was trying to convey. – Rajan Maheshwari Oct 14 '16 at 12:34

score 3 · Answer 9 · edited Jan 21 '16 at 08:52

3

Write the code in your viewDidLoad()

self.view.layer.borderColor = anyColor().CGColor

And you can set Color with RGB

func anyColor() -> UIColor {
    return UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
}

Learn something about CALayer in UIKit

edited Jan 21 '16 at 08:52

Community

1
1

answered Apr 17 '15 at 13:53

Yichen Zhou

436
6
21

Somehow, it does nothing unless you explicitly set the border width too. – Nicolas Miari Feb 02 '16 at 07:26
@NicolasMiari that would be expected... you can't see a border colour you haven't set a size for. – Jono Guthrie Feb 19 '16 at 14:49
Sorry, I forgot to mention I was referring to text fields... which do seem to have a default non-zero border width from the start. However, I struggled to get the color I set reflected, until I explicitly set the border width. – Nicolas Miari Feb 19 '16 at 14:51

score 3 · Answer 10 · answered Jan 27 '17 at 12:20

3

swift 3.0

self.uiTextView.layer.borderWidth = 0.5
    self.txtItemShortDes.layer.borderColor = UIColor(red:205.0/255.0, green:205.0/255.0, blue:205.0/255.0, alpha: 1.0).cgColor

answered Jan 27 '17 at 12:20

Chathura Jayanaka

29
2

score 2 · Answer 11 · answered Jan 07 '21 at 06:05

Swift 5*

I, always use view extension to make view corners round, set border color and width and it has been the most convenient way for me. just copy and paste this code and controlle these properties in attribute inspector.

extension UIView {
    @IBInspectable
    var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
        }
    }
    
    @IBInspectable
    var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
    
    @IBInspectable
    var borderColor: UIColor? {
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            return nil
        }
        set {
            if let color = newValue {
                layer.borderColor = color.cgColor
            } else {
                layer.borderColor = nil
            }
        }
    }
}

score 0 · Answer 12 · edited Oct 12 '22 at 05:21

if you are dealing with the layers you can give border like this.... if not sometime you might have to true the wantslayer like self.anytextField.wantslayer = true

var BackgroundColor : CGColor = UIColor.blue.cgColor
subLayer.shadowColor = self.BackgroundColor
subLayer.borderColor = self.BackgroundColor
subLayer.borderWidth = CGFloat(4)

or you can use the extension of CA Layer for macOS

func addBorder(edge: NSRectEdge, color: NSColor, thickness: CGFloat) {

    let border = CALayer()

    switch edge {
    case NSRectEdge.maxY:
        border.frame = CGRect(x: 0, y: 0, width: frame.width, height: thickness)

    case NSRectEdge.minY:
        border.frame = CGRect(x:0, y: frame.height - thickness, width: frame.width, height:thickness)

    case NSRectEdge.minX:
        border.frame = CGRect(x:0, y:0, width: thickness, height: frame.height)

    case NSRectEdge.maxX:
        border.frame = CGRect(x: frame.width - thickness, y: 0, width: thickness, height: frame.height)

    default: do {}
    }

    border.backgroundColor = color.cgColor

    addSublayer(border)
 }

its usage is given below

subLayer.addBorder(edge: <#T##NSRectEdge#>, color: <#T##NSColor#>, thickness: <#T##CGFloat#>)

How to set the custom border color of UIView programmatically?

12 Answers12

Linked