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?

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

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/

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

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.

Answer 5

You can use a piece of code like:

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

Please note: addButton is an IBOutlet.