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.
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.