By Dave G


2016-05-11 13:16:23 8 Comments

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:

enter image description here

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

7 comments

@Kirit Modi 2016-05-11 13:32:21

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:

enter image description here

@Dave G 2016-05-11 14:26:02

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()

@Lucas 2018-09-02 16:14:44

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

@Naishta 2018-04-09 11:18:55

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
}

@dsunku 2018-02-17 04:54:59

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]

@Hardik Darji 2018-03-14 10:24:12

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]

@Hossam Ghareeb 2016-05-11 13:27:36

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

@dreampowder 2017-11-28 08:05:22

thanks for the code, it is quite usefull in many scenarios. but please change "maskLayer.frame = rect" to "mask.frame = rect"

@C. Kontos 2017-03-02 09:58:07

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)

@return true 2016-05-11 13:27:18

You forgot to set the frame of your shape layer:

mask.frame = layer.bounds

@Iyyappan Ravi 2016-05-11 13:24:08

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

@Anbu.Karthik 2016-05-11 13:25:05

bro - the questioner already called the method like view.roundCorners([.TopLeft , .TopRight], radius: 10), can you modify your answer once

@Iyyappan Ravi 2016-05-11 13:32:39

ya i know questioner ask but this above code is correct

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] programmatically remove UIButton background color

13 Answered Questions

[SOLVED] How to round the corners of a button

17 Answered Questions

[SOLVED] #pragma mark in Swift?

  • 2014-06-03 14:05:56
  • Arbitur
  • 196528 View
  • 845 Score
  • 17 Answer
  • Tags:   swift

30 Answered Questions

[SOLVED] UIView with rounded corners and drop shadow?

40 Answered Questions

10 Answered Questions

[SOLVED] How to make the corners of a button round?

19 Answered Questions

[SOLVED] Giving UIView rounded corners

47 Answered Questions

[SOLVED] Vertically align text to top within a UILabel

1 Answered Questions

[SOLVED] Create UIView with rounded specified borders

0 Answered Questions

Why fatherView use Clip to bounds and set Corner Radius, son view can not clip´╝č

  • 2017-07-05 01:14:29
  • Eggplant
  • 209 View
  • 0 Score
  • 0 Answer
  • Tags:   ios swift uiview

Sponsored Content