How to get rid of thin border in a UIView rounded with layer.cornerRadius in iOS 7.1.1?

Question

I have a customized UIView that rounds its corners by using layer.cornerRadius like this:

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.layer.cornerRadius = self.frame.size.width / 2.0;
    self.layer.borderColor = [UIColor whiteColor].CGColor;
    self.layer.borderWidth = 2.0;
    self.layer.masksToBounds = YES;
    self.backgroundColor = [UIColor redColor];
}

How can I get rid of the very thin outer red circle?

Hi, Did you find solution for this.Because I am facing same using can you please help me on this issue. — Lakshmi Keerthana Siddu, Feb 23 '17 at 11:42

score 2 · Answer 1 · answered May 27 '14 at 13:52

2

Well, a more efficient way to do what you need would be to copy paste this function in the .m file of your custom view and call it in the drawRect method:

- (void)drawRoundedViewWithFrame: (CGRect)frame color:(UIColor *)color
{
    //// roundCircle Drawing
    UIBezierPath* roundCirclePath = [UIBezierPath bezierPathWithOvalInRect: frame];
    [color setFill];
    [roundCirclePath fill];
    [UIColor.whiteColor setStroke];
    roundCirclePath.lineWidth = 2;
    [roundCirclePath stroke];
}

answered May 27 '14 at 13:52

Kujey

1,122
6
17

Yeah, but I specifically wanted to have this as a UIView, because I want to manually set its position in the Storyboard. – Markus Rautopuro May 27 '14 at 13:59
1

Well you can still do it. Except that the view will be empty on the storyboard. – Kujey May 27 '14 at 14:03

score 1 · Answer 2 · edited May 23 '17 at 12:25

Based on an answer in here, I figured out a way to do this with these steps:

Set the UIView background color to [UIColor clearColor]
Manually draw a smaller circular background in drawRect:

Here's the drawRect: implementation:

- (void)drawRect:(CGRect)rect
{
    CGFloat margin = _borderWidth;
    CGRect background = CGRectMake(margin, margin,
        self.bounds.size.width - 2 * margin,
        self.bounds.size.height - 2 * margin);

    CGContextRef context = UIGraphicsGetCurrentContext();
    [_internalBackgroundColor set];
    CGContextFillEllipseInRect(context, background);
}

And the overwritten backgroundColor setter:

@property (nonatomic, strong) UIColor *internalBackgroundColor;

...

- (void)setBackgroundColor:(UIColor *)backgroundColor
{
    [super setBackgroundColor:[UIColor clearColor]];

    _internalBackgroundColor = backgroundColor;
}

**** Faster solution: ****

As Kujey pointed out, it's better not to use the layer.cornerRadius at all. Here's the drawRect: solution without the layer access:

- (void)drawRect:(CGRect)rect
{
    CGFloat margin = _borderWidth / 2.0;
    CGRect background = CGRectMake(margin, margin, self.bounds.size.width - 2 * margin, self.bounds.size.height - 2 * margin);

    CGContextRef context = UIGraphicsGetCurrentContext();
    [_internalBackgroundColor set];
    CGContextFillEllipseInRect(context, background);
    [_borderColor set];
    CGContextSetLineWidth(context, _borderWidth);
    CGContextStrokeEllipseInRect(context, background);
}

How to get rid of thin border in a UIView rounded with layer.cornerRadius in iOS 7.1.1?

2 Answers2

Linked