How to create a gradient perimeter using CALayer

Question

I've been trying for some time now, using CAGradientLayer to produce this .

Initially I tried having a gradient background using the .colors property, however this is only a background fill. Trying this approach, I tried to add another CALayer inside that had a black background, however i could never get the radius correct, and it would create a line of various thickness at the rounded corners.

Is there a better way to create this rounded rect border with a gradient to it? Will CALayer not achieve this and should I move over to UIBezierPath or CGContextRef?

Code for failed attempt:

UIView *view = [[UIView alloc]initWithFrame:CGRectMake(12*twelthWidth - squareCentre.x - squareSize.width, squareCentre.y, squareSize.width, squareSize.height)];
       // Create the rounded layer, and mask it using the rounded mask layer
        CAGradientLayer *roundedLayer = [CAGradientLayer layer];
        [roundedLayer setFrame:view.bounds];
        roundedLayer.cornerRadius = view.bounds.size.width/5;
        roundedLayer.masksToBounds = YES;
        roundedLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor], (id)[[UIColor blueColor] CGColor], nil];
        roundedLayer.borderWidth = 4;
        roundedLayer.borderColor = [UIColor clearColor].CGColor;

        // Add these two layers as sublayers to the view

        int BorderWidth = 5;

        CALayer *solidColour = [CALayer layer];
        solidColour.cornerRadius = view.bounds.size.width/5;
        solidColour.masksToBounds = YES;
        solidColour.backgroundColor = [UIColor blackColor].CGColor;
        [solidColour setFrame:CGRectMake(BorderWidth, BorderWidth, roundedLayer.bounds.size.width - 2*BorderWidth, roundedLayer.bounds.size.height - 2*BorderWidth)];


        [view.layer insertSublayer:roundedLayer atIndex:0];
        [view.layer insertSublayer:solidColour above:roundedLayer];
        [self.view addSubview:view];

Which produces:

Whereby the corners aren't right. Could it be that I need to calculate a different radius for the second layer?

Edit

After setting the radius of the solid colour to solidColour.bounds.size.width/5, it still isn't right - It goes too thin at the corners.

Answer 1

The problem you are seeing is because the inner and outer corner radius are the same. That is what causes the line thickness to vary. This illustration from CSS-Tricks highlights the issue (even thought you aren't using CSS, the problem is still the same):

The solution is to calculate the inner radius as:

innerRadis = outerRadius - lineThickness

As shown in this illustration by Joshua Hibbert:

Answer 2

Instead of using the view bounds to set the cornerRadius of the solid layer, use the layer's frame value after you've set it to the correct inset value:

solidColour.masksToBounds = YES;
solidColour.backgroundColor = [UIColor blackColor].CGColor;
[solidColour setFrame:CGRectMake(BorderWidth, BorderWidth, roundedLayer.bounds.size.width - 2*BorderWidth, roundedLayer.bounds.size.height - 2*BorderWidth)];
solidColour.cornerRadius = solidColour.frame.size.width/5;
[view.layer insertSublayer:roundedLayer atIndex:0];
[view.layer insertSublayer:solidColour above:roundedLayer];

With this I get the following image

Answer 3

Just for your convenience if you use swift

    let v = yourUIVIEW
    let outerRadius:CGFloat = 60
    let borderWidth:CGFloat = 8;

    let roundedLayer = CAGradientLayer()
    roundedLayer.frame =  v.bounds
    roundedLayer.cornerRadius = outerRadius
    roundedLayer.masksToBounds = true

    roundedLayer.endPoint = CGPoint(x: 1 , y: 0.5)


    roundedLayer.colors = [ UIColor.redColor().CGColor, UIColor.blueColor()!.CGColor]


    let innerRadius = outerRadius - borderWidth
    //Solid layer
    let solidLayer = CALayer()

    solidLayer.masksToBounds = true
    solidLayer.backgroundColor = UIColor.whiteColor().CGColor
    solidLayer.cornerRadius = innerRadius
    solidLayer.frame = CGRect(x: borderWidth, y: borderWidth, width: roundedLayer.bounds.width - 2*borderWidth, height:roundedLayer.bounds.height - 2*borderWidth )


    v.layer.insertSublayer(roundedLayer, atIndex: 0)
    v.layer.insertSublayer(solidLayer, above: roundedLayer)