Round Top Corners of a UIView in Swift

Question

I am trying to round top corners using below code

func roundCorners(corners:UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = path.cgPath
        self.layer.mask = maskLayer
    }

use myView.roundCorners(corners:[.topLeft, .topRight], radius: radius)

But it's rounding one side of the view:

this is in a tableView sectionHeader if I scroll down then up it rounded using same code:

And also top discount view corners are rounded using same function.

thank's for help.

Update if I fix the width on the view then it works fine.

The issue was probably occurring because the header view's frame was based off of the tableView's frame, which was not set at the time of the first load. When the header scrolled off screen and came back, the header used the updated view size and it displayed properly. — Paolo, Sep 12 '17 at 15:13
@Paolo Yes, you are right, This is because of view is not layout properly according to screen when code executed. — Abdul Rehman, Jan 07 '18 at 10:44

José · Answer 1 · 2021-05-04T16:41:32.163

iOS 11 introduced maskedCorners which results in smoother and better quality results. You can still use the UIRectCorner in the function call and have it translated to CACornerMask:

Swift 5:

extension UIView {

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        if #available(iOS 11.0, *) {
            clipsToBounds = true
            layer.cornerRadius = radius
            layer.maskedCorners = CACornerMask(rawValue: corners.rawValue)
        } else {
            let path = UIBezierPath(
                roundedRect: bounds, 
                byRoundingCorners: corners, 
                cornerRadii: CGSize(width: radius, height: radius)
            )
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            layer.mask = mask
        }
    }
}

You beautiful, beautiful genius. Thank you for this. – gabuchan Jul 22 '20 at 14:33 — gabuchan, Jul 22 '20 at 14:33

score 13 · Accepted Answer · answered Jan 07 '18 at 10:42

Solved this with the help of @Paolo and below is the working code.

Swift 3.2

extension UIView {

    func roundCorners(corners:UIRectCorner, radius: CGFloat) {

        DispatchQueue.main.async {
            let path = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii: CGSize(width: radius, height: radius))
            let maskLayer = CAShapeLayer()
            maskLayer.frame = self.bounds
            maskLayer.path = path.cgPath
            self.layer.mask = maskLayer
        }
    }
}

for calling this function use below line and mention which corners you want to round

self.myView.roundCorners(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 8.0)

score 0 · Answer 3 · answered Apr 10 '23 at 11:31

also can done as

extension UIView {

func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
    if #available(iOS 11.0, *) {
        clipsToBounds = true
        layer.cornerRadius = radius
        corners.forEach { corner in 
         layer.maskedCorners = CACornerMask(rawValue: corner.rawValue)
        }
    } else {
        corners.forEach { corner in
            let path = UIBezierPath(
                roundedRect: bounds,
                byRoundingCorners: corner,
                cornerRadii: CGSize(width: radius, height: radius)
            )
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            layer.mask = mask
        }
    }
}

}

and can be used as

yourView.roundCorners(.topLeft, .topRight, radius: 8)

Round Top Corners of a UIView in Swift

3 Answers3

Linked