Group Group Group Group Group Group Group Group Group

Core Graphics Tutorial: Lines, Rectangles, and Gradients |


In this tutorial, you’ll learn how to use Core Graphics to draw lines, rectangles, and gradients — starting by beautifying a table view!

This is a companion discussion topic for the original entry at


Still damn ugly :wink: , but a very useful beginner tutorial, thanks for that.


@pintiboy Really glad you like it! Cheers! :]


how to make that yellow border to rounded in the masterview controller


@tomelliott Can you please help with this when you get a chance? Thank you - much appreciated! :]


Hahaha guess it’s a good job I’m an engineer not a designer :]


Hi @shaktiprakash.

In StarshipListCellBackground, replace the stroke drawing code (after the call to context.drawLinearGradient) with the following:

    let strokeRect = backgroundRect.insetBy(dx: 4.5, dy: 4.5)
    let path = UIBezierPath(roundedRect: strokeRect, cornerRadius: 5.0)
    context.drawPath(using: .stroke)

Rather than stroking the rect this code creates a UIBezierPath for a rounded rect that fits within the stroke rect with the given corner radius. We then add that path to the context and draw it using context.drawPath(using:) rather than calling the stroke(rect:) convenience function.


@tomelliott thanks man it worked for me .You guys are really doing nice jobs .Thanks for inspiring and motivating us :grinning::grinning::grinning: