UILabel Background Color Leaks to Border

Question

I'm creating a UILabel to which I set the background color and corner radius with the following code:

self.scoreLabel.backgroundColor = [UIColor DISRed];// custom red`
self.scoreLabel.layer.masksToBounds = YES;
self.scoreLabel.layer.cornerRadius = self.scoreLabel.frame.size.width/2;
self.scoreLabel.layer.borderWidth = 8.0;
self.scoreLabel.layer.borderColor = [[UIColor DISNavy] CGColor];

However the background's color seems to be leaking to the edge of the border (see image). Any ideas why? Any idea on how to fix it?

Answer 1

I was also facing the same problem. It was a silly mistake. I always forget to tick clipToBounds in case of cornerRadius.

So, just ticking the Clip to Bounds for UILabel in Storyboard fixed my problem.

And yes, we need to keep the below code too:

label.layer.masksToBounds = true

Answer 2

I ran into the same problem with the UIButton's background color leaking around the edge of its border.

Instead of setting the UIButton background color on the UIButton, set it on the UIButton's layer.

Replace:

self.scoreLabel.backgroundColor = [UIColor DISRed];// custom red`

With this:

self.scoreLabel.layer.backgroundColor = [[UIColor DISRed] CGColor];// custom red`