Set a border for UIButton in Storyboard

Question

I can't get a border onto my buttons in Xcode 5 without setting them directly in the code. Is it possible that there's no way to do this on the storyboard without making a custom background image?

Rhyolite

Answer 1

You can use key path.

For example the corner radius (layer.cornerRadius) as describe on the image. You will not be able to see the effects on storyboard, cause this parameters are evaluated at runtime. Now you can use a swift category in UIView (code bellow the picture) in with @IBInspectable to show the result at the storyboard (If you are using the category, use only cornerRadius and not layer.cornerRadius as a key path.

---

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

---

Here is category from Peter DeWeese answer that allow use keypath layer.borderUIColor to set the border color.

CALayer+XibConfiguration.h:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer(XibConfiguration)

// This assigns a CGColor to borderColor.
@property(nonatomic, assign) UIColor* borderUIColor;

@end

CALayer+XibConfiguration.m:

#import "CALayer+XibConfiguration.h"

@implementation CALayer(XibConfiguration)

-(void)setBorderUIColor:(UIColor*)color
{
    self.borderColor = color.CGColor;
}

-(UIColor*)borderUIColor
{
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Putout

You learn something new every day.. this would have been useful to know many months ago hah. – Christen

Wow, this is so cool! I didn't know about this hidden gem! Upvoted. – Transpire

BTW, I also had to set layer.borderWidth for the border to show. – Transpire

That is wild! Thanks so much Guilherme, and I have a feeling that's going to come in handy in the future – Rhyolite

Can I set the layer.borderColor? That doesn't seem to be working. – Rhyolite

It's because layer.boderColor expected a CGColor, not an UIColor. But you can make a category as workaround. wait a minute, i will update my answer – Putout

Magic! Wow, so the nomenclature of CALayer+XibConfiguration makes it configure layers in XibConfigurations? It worked for me but I don't understand how! Anyway, thank you so much Guilherme. Great answer. – Rhyolite

My LAST question, if you have a second, is would any of this allow for just adding a top border, or just a left border, etc. If not I see some workarounds I can try, but just curious - it's not critical to what I'm doing, I just feel like this is going to be a popular q/a so if it could be more complete and you already know how to do it, why not add it? – Rhyolite

Tommy, I will update my answer with a workaround for this, but i don't have time to test right now – Putout

@GuilhermeTorresCastro I'm a little new to iOS development. Are border color snippets in a separate file? How do you use it once implemented? – Rillet

Yes @NoahPassalacqua, It's a category (search for it in google, to get some explanation on this). Once you have added the category to your project you can use: layer.borderUIColor keypath at interface builder. – Putout

There is only a slight problem with this approach. When a modal view is presented, the border color of the button doesn't change. It looks weird with other standard controls like a segmented control which gray out when a modal view is presented. Because of this, I'm using a subclass of UIButton. However, when a view is presented, I'm unable to detect it and change the border color to gray. Bummer... – Lantern

I just tried it and am not seeing the changes in the rounder corners show in my storyboard. However, I do see the changes when running the file. I'm on 6.3.2. Any suggestions? – Saporific

@MatthewChung to see the changes in IB you have to make a category the UIView , and not for the CALayer. Which one did you used ? – Putout

Thanks for writing @GuilhermeTorresCastro . I am using the swift extension. I know this is probably asking too much, but i made a trivial project with 1 view and the extension and it is still not displaying rounded corners in the storyboard. If you have 2 minutes, it would be very very much appreciated. github.com/captainchung/test – Saporific

It would be worthwhile also showing a screen shot of the addition UI element that appears once you've a swift extension in place, so it does not have to be done in the user defined values area. – Bogor

Answer 2

Swift 3 If you want to see the result in IB when you use IBInspectable, you have to extend UIView and add the properties to that class, i.e.

@IBDesignable class MyView: UIView {}

extension MyView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderColor: UIColor {
        get {
            return UIColor.init(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue.cgColor
        }
    }
}

reference: http://nshipster.com/ibinspectable-ibdesignable/

Unstuck

Answer 3

Short answer :

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

---

Long answer :

Rounded Corners UIButton

customUIView.layer.cornerRadius = 10

Border Thickness

pcustomUIView.layer.borderWidth = 1

Border Color

customUIView.layer.borderColor = UIColor.blue.cgColor

Johannajohannah

Answer 4

you can set your UIButton User Defined Run Time Attributes ie borderWidth, cornerRadius, borderColor etc. As shown in the image. Note:- don't use layer. before the attribute name, it will not work.

Ermentrude

Tried, it doesn't work, can you provide a link to documentation why this should work? or an example. I guess you mean you need first write extension with IBInspectable vars like in other answers. Answer need to be full – Antemundane

Answer 5

It is correct! See Key "borderColor" - this is without "layer."

Thai

This is already in @Muhammad‘s answer. – Halogenate

Answer 6

You can use a piece of code like:

self.addButton.layer.borderColor = [[UIColor greenColor] CGColor];

Please note: addButton is an IBOutlet.

Saintmihiel

Questioner needs non-programing way. – Cotopaxi