Round Top Corners of a UIButton in Swift

Question

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?

Please consider accepting my answer, because it is the most precise answer to the problem. Future visitors of this question will not be satisfied just by seeing a bunch of code that works, but does not explain why it works (that's what the currently accepted answer does) but rather by seeing _where_ the problem is – and that is nailed down by my answer. — return true, May 13 '16 at 12:42
see my answer here: http://stackoverflow.com/a/40222533/2594699 — Nhat Dinh, Oct 24 '16 at 15:51

Naishta · Answer 1 · 2018-04-17T05:11:46.470

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
}

Kirit Modi · Accepted Answer · 2018-08-27T06:16:43.090

59

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:

edited Aug 27 '18 at 06:16

answered May 11 '16 at 13:32

Kirit Modi

23,155
15
89
112

Do you know how I can remove this from the button after? If I want to reuse the button but without rounding? NVM, here it is: myBtn.layer.mask?.removeFromSuperlayer() – Dave G May 11 '16 at 14:26
3

Doesn't work for when buttons are in stack view. When rounding corner bottom left and right corners, it rounds only bottom left corner. When using buttons that are not embedded in a stack view, it works totally fine – Lucas Sep 02 '18 at 16:14
1

Using the frame like this will not work when resizing the button. e.g. adding the button to a UIStackView. – Womble Jul 25 '19 at 05:37
How can I round all 4 corners with this extension? – Ximena Flores de la Tijera Sep 25 '21 at 00:40

score 20 · Answer 3 · answered Mar 02 '17 at 09:58

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)

score 12 · Answer 4 · answered Feb 17 '18 at 04:54

12

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]

answered Feb 17 '18 at 04:54

dsunku

503
5
9

Thanks .. /* Defines which of the four corners receives the masking when using * `cornerRadius' property. Defaults to all four corners. */ .button.layer.cornerRadius = 8 button.layer.masksToBounds = true button.clipsToBounds = true button.layer.maskedCorners = [.layerMaxXMaxYCorner] – Hardik Darji Mar 14 '18 at 10:24

score 9 · Answer 5 · answered Jun 16 '19 at 12:36

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)

how to set shadow to these buttons with [.topLeft , .topRight] ? — Vadlapalli Masthan, Jun 19 '19 at 11:45
Using the frame like this will not work when resizing the button. e.g. adding the button to a UIStackView. — Womble, Jul 25 '19 at 05:35

score 6 · Answer 6 · edited Jan 25 '18 at 01:18

6

Update you extension to be 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 shape layer (mask) needs to know the frame

edited Jan 25 '18 at 01:18

Edan

167
14

answered May 11 '16 at 13:27

Hossam Ghareeb

7,063
3
53
64

1

thanks for the code, it is quite usefull in many scenarios. but please change "maskLayer.frame = rect" to "mask.frame = rect" – dreampowder Nov 28 '17 at 08:05

score 2 · Answer 7 · answered May 11 '16 at 13:24

2

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 its helpful

answered May 11 '16 at 13:24

Iyyappan Ravi

3,205
2
16
30

bro - the questioner already called the method like `view.roundCorners([.TopLeft , .TopRight], radius: 10)`, can you modify your answer once – Anbu.Karthik May 11 '16 at 13:25
ya i know questioner ask but this above code is correct – Iyyappan Ravi May 11 '16 at 13:32

Ars · Answer 8 · 2020-11-05T15:58:01.580

That's what helped me

extension UIView {

   func roundCorners(
      corners: UIRectCorner, 
      radius: CGFloat
   ) {
      let path = UIBezierPath(
         roundedRect: bounds,
         byRoundingCorners: corners,
         cornerRadii: CGSize(
            width: radius, 
            height: radius
         )
      )

      let mask = CAShapeLayer()
      mask.path = path.cgPath
      layer.mask = mask
   }
}

Pay attention to the fact that if you have layout constraints attached to it, you must refresh this as follows in your UIView subclass:

override func viewDidLayoutSubviews() {
   super.viewDidLayoutSubviews()

   yourButtonOutletName.roundCorners(
      corners: [.topLeft, .topRight],
      radius: yourButtonOutletName.frame.height / 2
   )
}

score 0 · Answer 9 · answered May 11 '16 at 13:27

0

You forgot to set the frame of your shape layer:

mask.frame = layer.bounds

answered May 11 '16 at 13:27

return true

7,839
2
19
35

score 0 · Answer 10 · answered Jul 02 '19 at 06:51

rounding is applied to corner's of view/Button .. , but coming to border of button , it is not applying correctly. can I have any solution for that? @

Here is the code that I have used , which is working (border) in iOS11.0 and above and not in below versions(<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

Using the frame like this will not work when resizing the button. e.g. adding the button to a UIStackView. — Womble, Jul 25 '19 at 05:37

Round Top Corners of a UIButton in Swift

10 Answers10

Linked

Related