How can you make a UIView with rounded top corners and square bottom corners

Question

I am trying to get a view with rounded top corners and square bottom corners, similar to the top row of a grouped UITableViewCell.

Anyone one know an easy way to draw it and not use a background image?

possible duplicate of [Just two rounded corners?](http://stackoverflow.com/questions/4845211/just-two-rounded-corners) — Kevin, Jan 10 '13 at 19:31

score 14 · Answer 1 · answered Apr 09 '18 at 11:17

Swift 4: For 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 Versions

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
}

score 13 · Accepted Answer · edited May 23 '17 at 12:25

13

I read this post a while ago:

Just two rounded corners?

and also this follow-up post:

Round two corners in UIView

I think these should answer your question.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 27 '11 at 22:29

PengOne

48,188
17
130
149

Consider improving your post since your answer is essentially two links. See: [Are answers that just contain links elsewhere really “good answers”?](http://meta.stackexchange.com/q/8231/156620) and [Why is linking bad?](http://meta.stackexchange.com/q/7515/156620). – Jun 28 '11 at 00:21
4

@Bavarious: I'm not sure how to do that in this case without just copying the answers (mostly code). Even with that, the comments to the answer and the second post contain a lot of relevant details. I'll look it over again and see if I can add more context. I appreciate the constructive criticism. – PengOne Jun 28 '11 at 00:51

score 8 · Answer 3 · edited Sep 02 '19 at 08:07

With iOS 11 there is a new structure introduced named CACornerMask.

With this structure you can make changes with corners: topleft, topright, bottom left, bottom right.

Swift Sample:

myView.clipsToBounds = true
myView.layer.cornerRadius = 10
myView.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]

Objective-C Sample

self.view.clipsToBounds = YES;
self.view.layer.cornerRadius = 10;
self.view.layer.maskedCorners = kCALayerMinXMinYCorner | kCALayerMaxXMinYCorner;

score 1 · Answer 4 · answered Nov 27 '19 at 07:08

Objective C

iOS 11 using view corner radius

if (@available(iOS 11.0, *)) {
            _parentView.clipsToBounds = YES;
            _parentView.layer.cornerRadius = 20;
            _parentView.layer.maskedCorners = kCALayerMinXMinYCorner | kCALayerMaxXMinYCorner;
        } else {
            UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_parentView.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(20.0, 20.0)];

            CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
            maskLayer.frame = _parentView.bounds;
            maskLayer.path  = maskPath.CGPath;
            _parentView.layer.mask = maskLayer;
        }

How can you make a UIView with rounded top corners and square bottom corners

4 Answers4

Linked