title: Rounded Corners at bottom CoreGraphics iOS
body: <p>To draw </p>
  
  <ul>
  <li>border at the bottom, left and right .</li>
  <li>rounded corners at the bottom</li>
  <li>clip to the border</li>
  <li>Fill the colour with the actual colour, which might be set in the .xib file, but in the following code I had set the colour to clear colour. </li>
  </ul>
  
  <p>For the the above things and the code listed below I get the following output.</p>
  
  <p><img src="https://i.stack.imgur.com/vzFLf.png" alt="enter image description here"></p>
  
  <p>A rough idea of the required output can be found as below in the image.<img src="https://i.stack.imgur.com/DkZir.png" alt="enter image description here"></p>
  
  <pre><code>-(id) initWithCoder:(NSCoder *)aDecoder{
      self=[super initWithCoder:aDecoder];
      if(self){
          self.clipsToBounds=YES;
          self.backgroundColor=[UIColor clearColor];
      }
      return self;
  }
  
  - (void)drawRect:(CGRect)rect
  {
      // Drawing code
  
      CGFloat margin=2.0;
      CGRect outerRect=CGRectInset(rect, margin, margin);
      CGMutablePathRef path=createRoundedRectForRect(outerRect, 10.0);
  
      CGFloat margin1=1.0;
      CGRect innerRect=CGRectInset(outerRect, margin1, margin1);
      CGMutablePathRef innerPath=createRoundedRectForRect(innerRect, 5.0);
      CGContextRef context=UIGraphicsGetCurrentContext();
      CGContextSaveGState(context);
  
      CGContextAddPath(context, path);
      CGContextAddPath(context, innerPath);
      CGContextClip(context);
  
      CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor
                                      );
      CGContextStrokeRect(context, rect);
  
      CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor
                                     );
      CGContextFillRect(context, innerRect);
  
      CGContextRestoreGState(context);
  }
  
  
  
  CGMutablePathRef createRoundedRectForRect (CGRect rect, CGFloat radius){
      CGMutablePathRef path=CGPathCreateMutable();
      CGPathMoveToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect));
  
      CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);
  
      CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);
  
      CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect),CGRectGetMinY(rect));
  
      return path;
  }
  </code></pre>
  
  <p><strong>Part 2, Changes</strong></p>
  
  <p>These below changes gives me the following output, where "Add" Button still overlaps and is not clipped to the border.</p>
  
  <p>The output is almost the expected one, as seen in the following image.</p>
  
  <p><img src="https://i.stack.imgur.com/PdEHS.png" alt="enter image description here"></p>
  
  <pre><code>- (void)drawRect:(CGRect)rect
  {
      CGSize radii=CGSizeMake(10.0, 10.0);
      UIBezierPath *path=[UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:radii];
      [[UIColor blackColor] setFill];
      [path fill];
  
      CGFloat margin=4.0;
      CGRect innerRect=CGRectMake(rect.origin.x+margin, 0, rect.size.width-(2*margin), rect.size.height-margin);
  
      //Scaling InnerRadii
      CGSize radii2=CGSizeMake(radii.width-margin, radii.height-margin);
      UIBezierPath *innerPath=[UIBezierPath bezierPathWithRoundedRect:innerRect byRoundingCorners:UIRectCornerBottomRight|UIRectCornerBottomLeft cornerRadii:radii2];
  
      [[UIColor redColor] setFill];
      [innerPath fill];
  
  }
  </code></pre>