Round upper corners of UIButton in Swift

Question

I know that I can get around all four corners using:

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

Since I only want to get around 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 } } 

What is called like this:

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

However, this does not work for UIButton. When I turn on the extension for the UIButton type and pass the button to it, the result is as follows:

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

Answer 1

Adding the UIButton Extension:

 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 } } 

The call to viewDidAppear / viewDidLayoutSubviews:

 btnCorner.roundedButton() 

Corner Out Button:

Answer 2

Swift 4: for the 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 } } 

Before 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 } 

Answer 3

For quick 3, Kirit Modi's answer changes 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 beginning of the extension file, be sure to add:

 import UIKit 

If you want an extension for UIView with the ability to round the top or bottom corner, 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 } } 

What is called a button:

 myButton.roundedCorners(top: true) 

Answer 4

iOS 11 really simplified round corners. The code below rounds the upper left and lower right corners.

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

Answer 5

Update the extension like 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() let rect = self.bounds mask.frame = rect mask.path = path.cgPath self.layer.mask = mask } } 

The form level (mask) must know the frame

Answer 6

You forgot to set the border of your layer:

 mask.frame = layer.bounds 

Answer 7

Use this code,

 let path = UIBezierPath(roundedRect:viewTo.bounds, byRoundingCorners:[.TopRight, .TopLeft], cornerRadii: CGSizeMake(20, 20)) let maskLayer = CAShapeLayer() maskLayer.path = path.CGPath viewTo.layer.mask = maskLayer 

hope it will be useful

Answer 8

For fast 5 and maximum flexibility

Define an extension using the 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 function roundCorners

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

Or with a certain radius

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

Answer 9

Rounding applies to the viewing angle / Button .., but to the border of the button, it does not apply correctly. Can I have any solution for this? @

Here is the code I used that works (border) in iOS11.0 and above, and not in versions below (<11.0)

 if #available(iOS 11.0, *) { self.layer.cornerRadius = radius self.layer.maskedCorners = maskedCorners } else { let shapeLayer = CAShapeLayer() shapeLayer.position = self.center self.layer.masksToBounds = true self.clipsToBounds = true let bezirePath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) shapeLayer.bounds = frame shapeLayer.path = bezirePath.cgPath self.layer.mask = shapeLayer