UiView with top left and right rounded corners and border

Question

I have a UIView. I need to make only it's top left and top right corners rounded and also to have a 1 point border width.

Any idea?

Thanks

score 11 · Accepted Answer · edited May 23 '17 at 12:09

11

Try this:

#import <QuartzCore/QuartzCore.h>

view.layer.cornerRadius = 8.0;
view.layer.borderWidth = 1.0;
view.layer.borderColor = [UIColor blueColor].CGColor;

however, it'll make all of your corners rounded. If you don't want this, there are two options:

Draw the rounded corner yourself using CoreGraphics (How to draw a rounded rectangle in Core Graphics / Quartz 2D?) or
Use a mask (CALayer's @property mask here: http://developer.apple.com/library/ios/#DOCUMENTATION/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html)

edited May 23 '17 at 12:09

Community

1
1

answered Jan 23 '12 at 22:24

Thanks for your reply! I don't need all the corners rounded, only to top ones. Applying a mask layer won't do the trick.(the view will have a borner, but not on the rounded corners). I'll try # 1. – user1078065 Jan 23 '12 at 22:27

score 2 · Answer 2 · answered Feb 02 '17 at 08:18

UIView With top left,right rounded corners and shadow

#import <QuartzCore/QuartzCore.h>
backView.layer.shadowColor=[UIColor blackColor].CGColor;

backView.layer.masksToBounds = NO;

backView.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);

backView.layer.shadowRadius = 3;

backView.layer.shadowOpacity = 0.8;

      CGFloat radius = 20.0;
    CGRect maskFrame = self.backView.bounds;
    maskFrame.size.height += radius;
    CALayer *maskLayer1 = [CALayer layer];
    maskLayer1.cornerRadius = radius;
    maskLayer1.backgroundColor = [UIColor blackColor].CGColor;
    maskLayer1.frame = maskFrame;
    self.backView.layer.mask = maskLayer1;

score 1 · Answer 3 · answered Oct 13 '15 at 06:12

you can achieve this using beizer path like this -

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(5.0, 5.0)];

    [maskPath setLineWidth:1.0];
     //to give stroke color 
    [[UIColor colorWithRed:186.0/255.0 green:186.0/255.0 blue:186.0/255.0 alpha:1.0] setStroke];

    //to color your border
       [[UIColor colorWithRed:242.0/255.0 green:240.0/255.0 blue:240.0/255.0 alpha:1.0] setFill];       


    [maskPath fill];
    [maskPath stroke];

score 0 · Answer 4 · answered Sep 19 '12 at 04:15

A very simple and quick solution:

set the corner radius so that it draws all four corners rounded in the normal way
for each corner that you don't want rounded:
- create a small square UIView with side equal to the corner radius
- add it as subview of the main view (the one with the rounded corners)
- position it so that it sits exactly over the corner
- set its background color to be the same as the main view's background

Not necessarily the most elegant solution, but only takes a minute to code it up!

score 0 · Answer 5 · answered Jan 23 '12 at 22:28

0

Use CALayer's and try this tutorial more more information. http://nachbaur.com/blog/rendering-views-using-calayer-part-1

answered Jan 23 '12 at 22:28

AAV

3,785
8
32
59

UiView with top left and right rounded corners and border

5 Answers5