UIView with shadow, rounded corners and custom drawRect

This is a tricky one. UIView's clipsToBounds is necessary to get the rounded corners. But CALayer's masksToBounds has to be false so the shadow is visible. Somehow, everything works if drawRect is not overridden, but actually it shouldn't.

The solution is to create a superview to provide the shadow (in the demonstration below this is the shadowView). You can test the following in Playground:

class MyView : UIView {    override func drawRect(rect: CGRect) {        let c = UIGraphicsGetCurrentContext()        CGContextAddRect(c, CGRectMake(10, 10, 80, 80))        CGContextSetStrokeColorWithColor(c , UIColor.redColor().CGColor)        CGContextStrokePath(c)    }}let superview = UIView(frame: CGRectMake(0, 0, 200, 200))let shadowView = UIView(frame: CGRectMake(50, 50, 100, 100))shadowView.layer.shadowColor = UIColor.blackColor().CGColorshadowView.layer.shadowOffset = CGSizeZeroshadowView.layer.shadowOpacity = 0.5shadowView.layer.shadowRadius = 5let view = MyView(frame: shadowView.bounds)view.backgroundColor = UIColor.whiteColor()view.layer.cornerRadius = 10.0view.layer.borderColor = UIColor.grayColor().CGColorview.layer.borderWidth = 0.5view.clipsToBounds = trueshadowView.addSubview(view)superview.addSubview(shadowView)

Result:

I wrote a small extension to UIView to manage both rounded corners AND drop shadow.As the variables are @IBInspectable, everything can be set directly in the storyboard !

////  UIView extensions.swift////  Created by Frédéric ADDA on 25/07/2016.//  Copyright © 2016 Frédéric ADDA. All rights reserved.//import UIKitextension UIView {    @IBInspectable var shadow: Bool {        get {            return layer.shadowOpacity > 0.0        }        set {            if newValue == true {                self.addShadow()            }        }    }    @IBInspectable var cornerRadius: CGFloat {        get {            return self.layer.cornerRadius        }        set {            self.layer.cornerRadius = newValue            // Don't touch the masksToBound property if a shadow is needed in addition to the cornerRadius            if shadow == false {                self.layer.masksToBounds = true            }        }    }    func addShadow(shadowColor: CGColor = UIColor.black.cgColor,               shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),               shadowOpacity: Float = 0.4,               shadowRadius: CGFloat = 3.0) {        layer.shadowColor = shadowColor        layer.shadowOffset = shadowOffset        layer.shadowOpacity = shadowOpacity        layer.shadowRadius = shadowRadius    }}

And this is how it looks in the storyboard :

The result :

There is one requirement : DON'T touch either clipToBounds on the view (in code or in IB) or masksToBound on the layer.

NB: one case in which it won't work : tableViews.As UITableView automatically triggers clipToBoundsunder the hood, we can't have a drop shadow.

EDIT: as Claudia Fitero aptly noticed, you need to leave a small padding around the view to which you are adding a shadow, otherwise the shadow won't be visible. A 2px-padding is enough generally (depending on your shadow radius).

Shadow is dropped from whatever is inside view's layer. When you disable clipping, entire layer rectangle gets filled with default backgroundColor so the shadow becomes rectangular too. Instead of clipping it with rounded mask just make layer's contents rounded, draw them yourself. And layer's border is drawn around its bounds, so you need to draw it yourself too.

For example, in backgroundColor setter set actual background color to clearColor and use passed color in drawRect to draw a rounded rect with.

In example below I declare properties as IBInspectable and the whole class as IBDesignable, so everything can be set in storyboard. This way you can even use default Background selector to change your rounded rect color.

Swift

@IBDesignable class RoundRectView: UIView {    @IBInspectable var cornerRadius: CGFloat = 0.0    @IBInspectable var borderColor: UIColor = UIColor.blackColor()    @IBInspectable var borderWidth: CGFloat = 0.5    private var customBackgroundColor = UIColor.whiteColor()    override var backgroundColor: UIColor?{        didSet {            customBackgroundColor = backgroundColor!            super.backgroundColor = UIColor.clearColor()        }    }    func setup() {        layer.shadowColor = UIColor.blackColor().CGColor;        layer.shadowOffset = CGSizeZero;        layer.shadowRadius = 5.0;        layer.shadowOpacity = 0.5;        super.backgroundColor = UIColor.clearColor()    }    override init(frame: CGRect) {        super.init(frame: frame)        self.setup()    }    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        self.setup()    }    override func drawRect(rect: CGRect) {        customBackgroundColor.setFill()        UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius ?? 0).fill()        let borderRect = CGRectInset(bounds, borderWidth/2, borderWidth/2)        let borderPath = UIBezierPath(roundedRect: borderRect, cornerRadius: cornerRadius - borderWidth/2)        borderColor.setStroke()        borderPath.lineWidth = borderWidth        borderPath.stroke()        // whatever else you need drawn    }}

Swift 3

@IBDesignable class RoundedView: UIView {@IBInspectable var cornerRadius: CGFloat = 0.0@IBInspectable var borderColor: UIColor = UIColor.black@IBInspectable var borderWidth: CGFloat = 0.5private var customBackgroundColor = UIColor.whiteoverride var backgroundColor: UIColor?{    didSet {        customBackgroundColor = backgroundColor!        super.backgroundColor = UIColor.clear    }}func setup() {    layer.shadowColor = UIColor.black.cgColor    layer.shadowOffset = CGSize.zero    layer.shadowRadius = 5.0    layer.shadowOpacity = 0.5    super.backgroundColor = UIColor.clear}override init(frame: CGRect) {    super.init(frame: frame)    self.setup()}required init?(coder aDecoder: NSCoder) {    super.init(coder: aDecoder)    self.setup()}override func draw(_ rect: CGRect) {    customBackgroundColor.setFill()    UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius ?? 0).fill()    let borderRect = bounds.insetBy(dx: borderWidth/2, dy: borderWidth/2)    let borderPath = UIBezierPath(roundedRect: borderRect, cornerRadius: cornerRadius - borderWidth/2)    borderColor.setStroke()    borderPath.lineWidth = borderWidth    borderPath.stroke()    // whatever else you need drawn}}

Objective-C .h

IB_DESIGNABLE@interface RoundRectView : UIView@property IBInspectable CGFloat cornerRadius;@property IBInspectable UIColor *borderColor;@property IBInspectable CGFloat borderWidth;@end

Objective-C .m

@interface RoundRectView()@property UIColor *customBackgroundColor;@end@implementation RoundRectView-(void)setup{    self.layer.shadowColor = [UIColor blackColor].CGColor;    self.layer.shadowOffset = CGSizeZero;    self.layer.shadowRadius = 5.0;    self.layer.shadowOpacity = 0.5;    [super setBackgroundColor:[UIColor clearColor]];}- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        [self setup];    }    return self;}- (instancetype)initWithCoder:(NSCoder *)coder{    self = [super initWithCoder:coder];    if (self) {        [self setup];    }    return self;}-(void)setBackgroundColor:(UIColor *)backgroundColor{    self.customBackgroundColor = backgroundColor;    super.backgroundColor = [UIColor clearColor];}-(void)drawRect:(CGRect)rect{    [self.customBackgroundColor setFill];    [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.cornerRadius] fill];    CGFloat borderInset = self.borderWidth/2;    CGRect borderRect = CGRectInset(self.bounds, borderInset, borderInset);    UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:borderRect cornerRadius:self.cornerRadius - borderInset];    [self.borderColor setStroke];    borderPath.lineWidth = self.borderWidth;    [borderPath stroke];    // whatever else you need drawn}@end

Result