cornerRadius with border: Glitch around border

Question

My application is mostly round- and borderbased.

I use the layer property of UIView to give a corner radius and a border.

But I am facing a problem that the corners are not clear.

I am getting the following results:

UIButton

UIImageView

You can observe a thin border line around the white or grey border.

This is my code:

button.layer.borderWidth = 2.0;
button.layer.borderColor = [[UIColor whiteColor] CGColor];
button.layer.cornerRadius = 4;

button.clipsToBounds = YES;

I have searched to solve this but I'm not getting success.

I have tried button.layer.masksToBounds = YES, but with no effect.

Am I missing anything? Or are there any other methods which can give me better results compared to CALayer?

Answer 1

I tried many solution and end by using UIBezierPath.

I create category of UIView and add method to make round rect and border.

This is method of that category:

- (void)giveBorderWithCornerRadious:(CGFloat)radius borderColor:(UIColor *)borderColor andBorderWidth:(CGFloat)borderWidth
{
    CGRect rect = self.bounds;
    
    //Make round
        // Create the path for to make circle
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:rect
                                                       byRoundingCorners:UIRectCornerAllCorners
                                                             cornerRadii:CGSizeMake(radius, radius)];

        // Create the shape layer and set its path
        CAShapeLayer *maskLayer = [CAShapeLayer layer];

        maskLayer.frame = rect;
        maskLayer.path  = maskPath.CGPath;
        
        // Set the newly created shape layer as the mask for the view's layer
        self.layer.mask = maskLayer;
    
    //Give Border
        //Create path for border
        UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:rect
                                                         byRoundingCorners:UIRectCornerAllCorners
                                                               cornerRadii:CGSizeMake(radius, radius)];

        // Create the shape layer and set its path
        CAShapeLayer *borderLayer = [CAShapeLayer layer];
        
        borderLayer.frame       = rect;
        borderLayer.path        = borderPath.CGPath;
        borderLayer.strokeColor = [UIColor whiteColor].CGColor;
        borderLayer.fillColor   = [UIColor clearColor].CGColor;
        borderLayer.lineWidth   = borderWidth;
        
        //Add this layer to give border.
        [[self layer] addSublayer:borderLayer];
}

I get idea of using UIBezierPath from this amazing article: Thinking like a Bézier path

I get most of code from this two link:

• UIView category for rounding just the corners which you want, not all like CALayer cornerRadius.
• How to get a border on UIBezierPath

Note: This is category method so self represent view on which this method is called. Like UIButton, UIImageView etc.