Round Top Corners of a UIButton in Swift

I know I can round all four corners using:

 myBtn.layer.cornerRadius = 8
 myBtn.layer.masksToBounds = true

Since I only want to round two, I did some research and found this:

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

Which is called like this:

view.roundCorners([.TopLeft , .TopRight], radius: 10)

Yet this doesn't work for a UIButton. When I switch the extension to be for type UIButton and pass it a button , the output looks like this:

The question is, how do I adapt this to work on a UIButton?

Solution 1:

Swift 4: For latest iOS 11 onwards

override func viewDidLoad() {
    super.viewDidLoad()

    if #available(iOS 11.0, *) {
        self.viewToRound.clipsToBounds = true
        viewToRound.layer.cornerRadius = 20
        viewToRound.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    } else {
        // Fallback on earlier versions
    }
}

Earlier iOS (10,9 etc) Versions (works for iOS 11 too)

override func viewDidLayoutSubviews() {
    self.viewToRound.clipsToBounds = true
    let path = UIBezierPath(roundedRect: viewToRound.bounds,
                            byRoundingCorners: [.topRight, .topLeft],
                            cornerRadii: CGSize(width: 20, height: 20))

    let maskLayer = CAShapeLayer()

    maskLayer.path = path.cgPath
    viewToRound.layer.mask = maskLayer
}

Solution 2:

Adding Extension of UIButton:

extension UIButton{
    func roundedButton(){
        let maskPath1 = UIBezierPath(roundedRect: bounds,
            byRoundingCorners: [.topLeft , .topRight],
            cornerRadii: CGSize(width: 8, height: 8))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

Calling in viewDidAppear/viewDidLayoutSubviews:

btnCorner.roundedButton()

Button Corner OutPut:

Solution 3:

For swift 3 Kirit Modi's answer is changed to:

extension UIButton {
   func roundedButton(){
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: [.topLeft , .topRight],
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

At the start of the extension's file don't forget to add:

import UIKit

If you want an extension for a UIView with the option of rounding top or bottom corners you can use:

extension UIView {
   func roundedCorners(top: Bool){
       let corners:UIRectCorner = (top ? [.topLeft , .topRight] : [.bottomRight , .bottomLeft])        
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

Which is called for a button as:

myButton.roundedCorners(top: true)

Solution 4:

iOS 11 has made it really easy to round corners. The code below rounds the top left and bottom right corners.

myView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

Solution 5:

For swift 5 and the most flexibility

Define an extension with a roundCorners function

extension UIButton {
    func roundCorners(corners: UIRectCorner, radius: Int = 8) {
        let maskPath1 = UIBezierPath(roundedRect: bounds,
                                     byRoundingCorners: corners,
                                     cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

Call the roundCorners function

myButton.roundCorners(corners: [.topLeft, .topRight])

Or with a specific radius

myButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)