UiView with top left and right rounded corners and border

Question

I have a UIView. I need to make only the upper left and upper right corners rounded, and also have a border width of 1 point.

Any idea?

thanks

Answer 1

Try the following:

#import <QuartzCore/QuartzCore.h> view.layer.cornerRadius = 8.0; view.layer.borderWidth = 1.0; view.layer.borderColor = [UIColor blueColor].CGColor; 

however, it will make all your corners rounded. If you do not want this, there are two options:

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

Answer 2

UIView With upper 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; 

Answer 3

you can achieve this using this path:

 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]; 

Answer 4

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

Answer 5

Very simple and quick solution:

• set the radius of the corner so that it draws all four corners rounded in the usual way.

• for every corner you don’t want to round:

  • create a small UIView square with a side equal to the radius of the corner
  • add it as a subview of the main view (with rounded corners).
  • position him so that he sits exactly around the corner
  • set the background color as the main background

Not necessarily the most elegant solution, but it only takes a moment to encode it!