147

Is there a way for UILabel to draw a border around itself? This is useful for me to debug the text placement and to see the placement and how big the label actually is.

kit
  • 1,108
  • 5
  • 14
  • 22
Boon
  • 37,606
  • 51
  • 186
  • 296

9 Answers9

269

You can set label's border via its underlying CALayer property:

#import <QuartzCore/QuartzCore.h>

myLabel.layer.borderColor = [UIColor greenColor].CGColor
myLabel.layer.borderWidth = 3.0

Swift 5:

myLabel.layer.borderColor = UIColor.darkGray.cgColor
myLabel.layer.borderWidth = 3.0
Gennadiy Ryabkin
  • 6,364
  • 3
  • 28
  • 37
Vladimir
  • 167,138
  • 35
  • 380
  • 310
  • Compiler complaints that there is no definition of borderColor and borderWidth within CALayer. – Boon Feb 22 '10 at 15:15
  • 2
    they're available only starting SDK 3.0 :( If you want just a quick solution for debugging purpose you can set semitransparent colored background for your label. – Vladimir Feb 22 '10 at 15:22
  • 36
    If the compiler complains then you probably forgot to `#import ` – Stefan Arentz Feb 22 '10 at 15:37
  • Make sure you set the border width, because I guess it defaults to zero, and you won't see it if you don't set it. – Tyler Collier Nov 23 '11 at 21:56
  • 1
    @Vladimir This solution is adding the border to all the sides of the label. Can we add the border only the right side of the label ??? – chinthakad Apr 20 '12 at 06:08
  • 1
    @chinthakad, no. I think you'll need custom label subclass with custom drawing for that – Vladimir Apr 20 '12 at 06:19
  • 3
    In Swift the first line would read: `myLabel.layer.borderColor = UIColor.greenColor().CGColor` – Roshambo Jan 21 '15 at 22:17
74

Here are some things you can do with UILabel and its borders.

enter image description here

Here is the code for those labels:

import UIKit
class ViewController: UIViewController {

    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    @IBOutlet weak var label3: UILabel!
    @IBOutlet weak var label4: UILabel!
    @IBOutlet weak var label5: UILabel!
    @IBOutlet weak var label6: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // label 1
        label1.layer.borderWidth = 1.0

        // label 2
        label2.layer.borderWidth = 5.0
        label2.layer.borderColor = UIColor.blue.cgColor

        // label 3
        label3.layer.borderWidth = 2.0
        label3.layer.cornerRadius = 8

        // label 4
        label4.backgroundColor = UIColor.cyan

        // label 5
        label5.backgroundColor = UIColor.red
        label5.layer.cornerRadius = 8
        label5.layer.masksToBounds = true

        // label 6
        label6.layer.borderWidth = 2.0
        label6.layer.cornerRadius = 8
        label6.backgroundColor = UIColor.yellow
        label6.layer.masksToBounds = true
    }
}

Note that in Swift there is no need to import QuartzCore.

See also

Community
  • 1
  • 1
Suragch
  • 364,799
  • 232
  • 1,155
  • 1,198
  • 2
    How were you able to get those paddings? My text is touching the borders... – eestein Nov 16 '16 at 15:32
  • 1
    @eestein, I think I just dragged the label size bigger in the Interface Builder. Or I might have set size constraints on them. – Suragch Nov 17 '16 at 00:29
19

Swift version:

myLabel.layer.borderWidth = 0.5
myLabel.layer.borderColor = UIColor.greenColor().CGColor

For Swift 3:

myLabel.layer.borderWidth = 0.5
myLabel.layer.borderColor = UIColor.green.cgColor
Nyakiba
  • 814
  • 8
  • 18
Esqarrouth
  • 35,175
  • 17
  • 147
  • 154
9

Swift 3/4 with @IBDesignable


While almost all the above solutions work fine but I would suggest an @IBDesignable custom class for this.

@IBDesignable
class CustomLabel: UILabel {

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 2.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}
Vakas
  • 5,382
  • 3
  • 33
  • 44
2

You can use this repo: GSBorderLabel

It's quite simple:

GSBorderLabel *myLabel = [[GSBorderLabel alloc] initWithTextColor:aColor
                                                     andBorderColor:anotherColor
                                                     andBorderWidth:2];
JAA
  • 1,024
  • 3
  • 20
  • 34
  • This deals with border around the actual characters in the text, the question is talking about borders around the rectangle the text is contained in. – jjxtra Mar 26 '13 at 15:11
2

UILabel properties borderColor,borderWidth,cornerRadius in Swift 4

@IBOutlet weak var anyLabel: UILabel!
   override func viewDidLoad() {
        super.viewDidLoad()
        anyLabel.layer.borderColor = UIColor.black.cgColor
        anyLabel.layer.borderWidth = 2
        anyLabel.layer.cornerRadius = 5
        anyLabel.layer.masksToBounds = true
}
Saeed Rahmatolahi
  • 1,183
  • 1
  • 18
  • 46
Sanjay Mali
  • 397
  • 4
  • 12
  • Thanks! I used the info from this answer in my PaddedLabel with Border solution here: https://stackoverflow.com/a/67317976/826946. Also gave a link back to here. – Andy Weinstein Apr 29 '21 at 13:16
1

Solution for Swift 4:

yourLabel.layer.borderColor = UIColor.green.cgColor

Exitare
  • 368
  • 1
  • 4
  • 18
0

it really depends on how many boarder use in your view , sometimes , just add a UIVIEW which the size is a bit bigger to create the border . the method is faster than produce a view

chings228
  • 1,789
  • 22
  • 23
0

Using an NSAttributedString string for your labels attributedText is probably your best bet. Check out this example.

Community
  • 1
  • 1
Bueno
  • 1,540
  • 2
  • 13
  • 14