iOS UIButton with rounded corners and background b

Question

I found one weird issue with rounded UIButton.

This is my code block to create this button.

let roundedButton = UIButton(type: .System)
roundedButton.frame = CGRectMake(100, 100, 100, 100)
roundedButton.backgroundColor = UIColor.blackColor()
roundedButton.layer.borderColor = UIColor.whiteColor().CGColor
roundedButton.layer.borderWidth = 3.0
roundedButton.layer.cornerRadius = roundedButton.frame.size.width/2
roundedButton.layer.masksToBounds = true
self.view.addSubview(roundedButton)

As you can see, there's a UIButton with backgroundColor, border and corner radius. It's fully rounded. But in the output I get the next appearance:

You can see that 1px border outside the button, it's its backroundColor (black). Seems that its inner border(white) is not starting from the edje of the button.

Do you have any idea how to fix this ?

Answer 1

Use CAShapeLayer instead, it also gives enhanced performance:

    let roundedButton = UIButton(type: .Custom)
    roundedButton.frame = CGRectMake(100, 100, 100, 100)
    let _border = CAShapeLayer()
    _border.path = UIBezierPath(roundedRect: roundedButton.bounds, cornerRadius:roundedButton.frame.size.width/2).CGPath
    _border.frame = roundedButton.bounds
    _border.strokeColor = UIColor.whiteColor().CGColor
    _border.fillColor = UIColor.blackColor().CGColor
    _border.lineWidth = 3.0
    roundedButton.layer.addSublayer(_border)

    self.view.addSubview(roundedButton)

Remember not to use backgroundColor of roundedButton, just use fillColor of CAShapeLayer.

Answer 2

I think it's a bug with CALayer.

I would do something like this:

let borderWidth: CGFloat = 3.0

let roundedButton = UIButton(type: .System)
roundedButton.frame = CGRectMake(100, 100, 100, 100)
roundedButton.layer.cornerRadius = roundedButton.frame.size.width / 2
roundedButton.layer.backgroundColor = UIColor.whiteColor().CGColor
roundedButton.layer.masksToBounds = true

let innerLayer = CALayer()
innerLayer.frame = CGRect(
  x: borderWidth,
  y: borderWidth,
  width: roundedButton.frame.width - borderWidth * 2,
  height: roundedButton.frame.height - borderWidth * 2
)
innerLayer.backgroundColor = UIColor.blackColor().CGColor
innerLayer.cornerRadius = innerLayer.frame.size.width / 2
roundedButton.layer.addSublayer(innerLayer)

Answer 3

This also happens when adding borders to images. I couldn't find a way to solve it directly but instead I added a white UIView behind my image to achieve the same look.

In your case, add a white UIView behind the button, with bigger width and height dimensions so as to achieve the desired border width (in your case it will be 6 [3x2] higher than the button and 6 wider). Then, just apply the border radius to both the UIView and the UIButton and voilà!