I am adding a border to a CALayer, but theres some strange behaviour whereby I get a fuzzy border after the border which I apply (see screenshot)
Here is my code:
- (void)configureLabel {
self.hidden = YES;
self.textAlignment = NSTextAlignmentCenter;
self.font = kLightFontWithSize(12);
self.textColor = [UIColor whiteColor];
self.backgroundColor = [UIColor redColor];
self.clipsToBounds=YES;
CALayer * layer = self.layer;
layer.backgroundColor = [UIColor clearColor].CGColor;
layer.cornerRadius = self.frame.size.height / 2;
layer.borderWidth = 2.5f;
layer.borderColor = kTextFieldGreenColor.CGColor;
}
My screenshot
Thank
Looks like you have a 2.5 point border width. Depending on the device, that can cause fuzziness around the edges.
Make than an even multiple of 2 and see what happens.
EDIT
I just tested my hypothesis, and it was wrong! That is a strange issue indeed. I've seen the half-pixel alignment issues in the past but they've always been a function of having views that are an odd number of pixels in size so that the system has to draw half-pixels on the edges, or having borders that don't quite line up in a pixel-perfect manner.
My guess is that this is a function of imprecise floating point mathematics combined with imprecision in the drawing system when it comes to rounding views & clipping.
My only suggestion, then, is to use a 2-view approach, where the outer view is - in your case - the background color (or the color you wanted the border) and the inner view is the label. You can make the outer view slightly larger than the inner view and make each of them round.
I had the same problem and this worked for me
myLayer.allowsEdgeAntialiasing = false