UIView rounded corners and drop shadow leaves tiny wrong pixel(s) on 4 edges

Question

I want a UILabel with rounded corners and drop shadow (on the bounds, not on the text)

I almost have this working, except for this pesky few pixels of the wrong color on all 4 edges ("remainder" of the "rounding"):

This is my custom reusable view:

I've set the various views to different colors to be able try see which view is misbehaving.

The top-level view is where I do the drop shadow (backgroundColor = green):

    view.layer.shadowColor = UIColor.blackColor().CGColor
    view.layer.shadowOpacity = 0.2
    view.layer.shadowOffset = CGSizeMake(3, 3);
    view.layer.shadowRadius = 3

Note that the pesky wrong pixels are indeed green.

The middle view ("BackgroundView") is where I do the rounded corners (backgroundColor = red):

    backgroundView.layer.cornerRadius = 3
    backgroundView.layer.masksToBounds = true

If I do this these edges turn from green to white. I don't know where the white is coming from:

view.backgroundColor = UIColor.greenColor().colorWithAlphaComponent(0.0)

If I try an unelegant hack and set the top-level view's backgroundColor to the pink background, then it messes up with the bottom corner for my drop shadow like this:

I'm new to Swift and iOS, and I know that surely, I'm doing something n00b'ish.

Update: I’m trying to make this a custom reusable view (xib + swift file). I find that using this method, I have to use more than 1 view, and I can’t quite get it right, but if I just try to manually make a one-off view (drop shadow + rounded corner) in Main.storyboard, it works just fine (and even, with just 1 view!). Why is that?

Have you tried setting backgroundView.backgroundColor to transparent, either in IB or code? — Dave Barker
I've tried clearColor and setting the alpha of the color itself, and the alpha of the layer .. to no avail — Jay
Make sure that view.opaque is false. Also make sure that backgroundView.clipsToBounds is true, but I would expect that it is — Doc
What are you trying to do in your custom view that requires so many views in the hierarchy? Could you just use an appearance proxy or a subclass of UILabel? — Jerry

Léo Natan Léo Natan · Accepted Answer · 2016-10-22T17:28:23

You need to set a shadowPath to the view's layer with a rounded rect path (CGPathCreateWithRoundedRect)

UIView rounded corners and drop shadow leaves tiny wrong pixel(s) on 4 edges

1 Answers