How can I make a button have a rounded border in Swift? How can I make a button have a rounded border in Swift? swift swift

How can I make a button have a rounded border in Swift?


Use button.layer.cornerRadius, button.layer.borderColor and button.layer.borderWidth.Note that borderColor requires a CGColor, so you could say (Swift 3/4):

button.backgroundColor = .clearbutton.layer.cornerRadius = 5button.layer.borderWidth = 1button.layer.borderColor = UIColor.black.cgColor


To do this job in storyboard (Interface Builder Inspector)

With help of IBDesignable, we can add more options to Interface Builder Inspector for UIButton and tweak them on storyboard. First, add the following code to your project.

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

Then simply set the attributes for buttons on storyboard.

enter image description here


I have created a simple UIButton sublcass that uses the tintColor for its text and border colours and when highlighted changes its background to the tintColor.

class BorderedButton: UIButton {required init?(coder aDecoder: NSCoder) {    super.init(coder: aDecoder)    layer.borderWidth = 1.0    layer.borderColor = tintColor.CGColor    layer.cornerRadius = 5.0    clipsToBounds = true    contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)    setTitleColor(tintColor, forState: .Normal)    setTitleColor(UIColor.whiteColor(), forState: .Highlighted)    setBackgroundImage(UIImage(color: tintColor), forState: .Highlighted)}}

This makes use of a UIImage extension that creates an image from a colour, I found that code here: https://stackoverflow.com/a/33675160

It works best when set to type Custom in interface builder as the default System type slightly modifies the colours when the button is highlighted.