UIView shadow AND rounded corners

Question

I have a UIView which I want to have a shadow and round corners. The problem is - a shadow requires masksToBounds = NO while round corners requires masksToBounds = YES.

The solution I found is to have a container which will have shadow and add my UIView as a subview of the container - and give it rounded corners.

This works. I have both shadow AND round corners - but it's no good. The shadow is of a rectangle view and my image has rounded corners.

Shadow and rounded corners

How can I implement a shadow for the rounded corners?

See this link http://stackoverflow.com/questions/1509547/uiview-with-rounded-corners — Yogendra, Jul 24 '14 at 08:07
I don't have a problem applying rounded corners. The problem is that rounded corners along with shadow doesn't look good... — YogevSitton, Jul 24 '14 at 08:32
Use images masking the corners. It's far simpler, faster to code and usually better looking than any programming solution. — Sulthan, Jul 24 '14 at 08:35
My problem is that the cell can change it's size from time to time using animation. Using images will make my life even harder. — YogevSitton, Jul 24 '14 at 10:42

score 1 · Answer 1 · answered Feb 25 '20 at 18:33

import UIKit

@IBDesignable
class customButton: UIView {

    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            self.layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var borderWidth:CGFloat = 0{
        didSet{
            self.layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor:UIColor = UIColor.white{
        didSet{
            self.layer.borderColor = borderColor.cgColor
        }
    }


}

Set this as class for the UIView and put maskToBound = true. Then in the inspector set the value accordingly to get a rounded shadow.

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

Remove the container, its clipping your view shadow. Import QuartzCore/QuartzCore.h . And try this code to your view

#import < QuartzCore/QuartzCore.h>

...

view.layer.cornerRadius = 5.0f;
[view.layer setShadowColor:[UIColor redColor].CGColor];
[view.layer setShadowOpacity:0.7];
[view.layer setShadowRadius:5.0];
[view.layer setShadowOffset:CGSizeMake(2.0, 2.0)];

to know more about maskToBound see this link

What UIView layer.masksToBounds is doing if set to YES?

edited May 23 '17 at 11:58

Community

1
1

answered Jul 24 '14 at 08:33

Yogendra

1,728
16
28

The container is the one with the shadow - it can't clip the shadow – YogevSitton Jul 24 '14 at 08:41
@godmoney So why you using a container, if you can set both (shadow, corner) to your main view layer? – Yogendra Jul 24 '14 at 08:50
No - because shadow requires maskToBounds = NO and rounded corners required maskToBounds = YES. – YogevSitton Jul 24 '14 at 10:34

Iphonenew · Answer 3 · 2014-07-24T08:42:02.217

-2

// border radius
[yourView.layer setCornerRadius:30.0f];

// border
[yourView.layer setBorderColor:[UIColor blackColor].CGColor];
[yourView.layer setBorderWidth:1.5f];
 yourView.layer.masksToBounds=YES;

// drop shadow
[yourView.layer setShadowColor:[UIColor lightGrayColor].CGColor];
[yourView.layer setShadowOpacity:0.8];
[yourView.layer setShadowRadius:3.0];
[yourView.layer setShadowOffset:CGSizeMake(2.0, 2.0)];

This may help you.

edited Jul 24 '14 at 08:42

answered Jul 24 '14 at 07:34

Iphonenew

299
2
11

What should be the value of "masksToBounds"? YES or NO? – YogevSitton Jul 24 '14 at 08:33
Is the border required? – YogevSitton Jul 24 '14 at 10:34
I used the code. The rounded corners are visible but the shadow is not (masksToBounds=YES). – YogevSitton Jul 24 '14 at 10:41
change the shadow Colour and border Colour. – Iphonenew Jul 24 '14 at 10:45
.maskToBounds limits the drawing of the shadow. This answer is incorrect. – Andre Cytryn Jul 27 '16 at 23:23

UIView shadow AND rounded corners

3 Answers3