UIView with a rounded corner and border has an incorrect edge color

Question

I have a UIView and two subsets in it. Sub points have rounded corners and a border value. The problem is that the outer edges of the rounded border contain a thin line of color for the background image. Am I missing something ??

UIView *outerView = [[UIView alloc] initWithFrame:CGRectMake(0, 50, 320, 320)]; [self.view addSubview:outerView]; outerView.backgroundColor = [UIColor whiteColor]; UIView *innerView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 320)]; [outerView addSubview:innerView1]; innerView1.backgroundColor = [UIColor blackColor]; innerView1.layer.borderWidth = 20; innerView1.layer.borderColor = [UIColor whiteColor].CGColor; innerView1.layer.cornerRadius = 20; //innerView1.layer.masksToBounds = YES; UIView *innerView2 = [[UIView alloc] initWithFrame:CGRectMake(160, 0, 160, 320)]; [outerView addSubview:innerView2]; innerView2.backgroundColor = [UIColor blackColor]; innerView2.layer.borderWidth = 20; innerView2.layer.borderColor = [UIColor whiteColor].CGColor; innerView2.layer.cornerRadius = 20; //innerView2.layer.masksToBounds = NO; //innerView2.clipsToBounds = YES; //innerView2.layer.shouldRasterize = YES; 

Answer 1

To work around this problem, set the background color in the subzones to clearColor , and then draw the background color using the drawRect method of the custom view class. Here is the code for the view class.

 @interface WorkAroundView : UIView @end @implementation WorkAroundView - (void)drawRect:(CGRect)rect { CGFloat margin = self.layer.borderWidth; CGRect background; background.origin.x = margin; background.origin.y = margin; background.size.width = self.bounds.size.width - 2 * margin; background.size.height = self.bounds.size.height - 2 * margin; CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor blackColor] set]; CGContextFillRect( context, background ); } @end 

And this is how you will use the custom view class. The only real change here from what you posted is that the background color for the subzones is set to clearColor.

 UIView *outerView = [[UIView alloc] initWithFrame:CGRectMake(360, 200, 320, 320)]; [self.view addSubview:outerView]; outerView.backgroundColor = [UIColor whiteColor]; WorkAroundView *innerView1 = [[WorkAroundView alloc] initWithFrame:CGRectMake(0, 0, 160, 320)]; innerView1.backgroundColor = [UIColor clearColor]; innerView1.layer.borderWidth = 20; innerView1.layer.borderColor = [UIColor whiteColor].CGColor; innerView1.layer.cornerRadius = 20; [outerView addSubview:innerView1]; WorkAroundView *innerView2 = [[WorkAroundView alloc] initWithFrame:CGRectMake(160, 0, 160, 320)]; innerView2.backgroundColor = [UIColor clearColor]; innerView2.layer.borderWidth = 20; innerView2.layer.borderColor = [UIColor whiteColor].CGColor; innerView2.layer.cornerRadius = 20; [outerView addSubview:innerView2]; 

Answer 2

add bezier path around corner

 CAShapeLayer *subLayer = [[CAShapeLayer alloc] init]; [subLayer setFillColor:[UIColor clearColor].CGColor]; [subLayer setStrokeColor:[UIColor whiteColor].CGColor]; [subLayer setLineWidth:1.0]; [subLayer setPath:[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.layer.cornerRadius].CGPath]; [imageView.layer addSublayer:subLayer];