Make a single edge rounded! “cornerRadius”

Hola!

When you are working on the project, you’ll probably deal with lots of shapes that are rounded. To apply, you’ll need to use “cornerRadius” to make the shape rounded.

Sources: EverydayToDo app

CornerRadius

The radius to use when drawing rounded corners for the layer’s background.

var cornerRadius: CGFloat { get set }

To make the UIView, UIButton, UIImage.. etc rounded, it’s simply a single line of code as below.

view.layer.cornerRadius = 20

By default, the corner radius does not apply to the image in the layer’s contents property. it applies only to the background color and border of the layer. However, setting the masksToBounds property to true causes the content to be clipped to the rounded corners.

When you wanna make a perfect circular shape, then you’ll need to always divide it into 2 of its own width or height. you can always access the width as frame.width .

view.layer.cornerRadius = view.frame.width/2

MaskedCorners

var maskedCorners: CACornerMask { get set }

Okay, what about how to make the specific edge to be rounded?

sources: GrabMe app

You just need to know the position of the edges.

So to make the top left and bottom left edges rounded, simply type below.

cellView.clipsToBounds = true
cellView.layer.cornerRadius = 20
cellView.layer.maskedCorners = CACornerMask(arrayLiteral: .layerMinXMinYCorner,.layerMinXMaxYCorner)

Make it as an Extension!

you can make extensions to reuse the func everywhere to make it easy to access and keep your code clean!

This is how you’ll use the extension in your ViewController

🔴MaskedCorners [specific edges]

locaionImage.makeCornerRounded(cornerRadius: 20, maskedCorners: [.layerMinXMinYCorner, .layerMaxXMinYCorner])

🔴CornerRadius [entire edges (?)]

locationImage.setCornerRadius(radius: 20)

CornerRadius

MaskedCorners