UIView with rounded corners and drop shadow

Question

I   ve been working on an application for a couple of years and received a simple design request  Round the corners on a UIView and add a drop shadow To do as given below  I want a custom UIView      I just wanted a blank white view with rounded corners and a light drop shadow  with no lighting effect   I can do each of those one by one but the usual clipToBounds maskToBounds conflicts occur

User · Answer

I ve created a helper on UIView   interface UIView  Helper   -  void roundCornerswithRadius  float cornerRadius                andShadowOffset  float shadowOffset   end   you can call it like this   self view roundCornerswithRadius 5 andShadowOffset 5     Here s the implementation  -  void roundCornerswithRadius  float cornerRadius                andShadowOffset  float shadowOffset       const float CORNER RADIUS   cornerRadius      const float SHADOW OFFSET   shadowOffset      const float SHADOW OPACITY   0 5      const float SHADOW RADIUS   3 0       UIView  superView   self superview       CGRect oldBackgroundFrame   self frame       self removeFromSuperview        CGRect frameForShadowView   CGRectMake 0  0  oldBackgroundFrame size width  oldBackgroundFrame size height       UIView  shadowView     UIView alloc  initWithFrame frameForShadowView        shadowView layer setShadowOpacity SHADOW OPACITY        shadowView layer setShadowRadius SHADOW RADIUS        shadowView layer setShadowOffset CGSizeMake SHADOW OFFSET  SHADOW OFFSET          self layer setCornerRadius CORNER RADIUS        self layer setMasksToBounds YES         shadowView addSubview self        superView addSubview shadowView

User · Answer

Check out the example project on GitHub to make sure you use the component correctly   Simple Swift 5 solution without any additional subviews or subclassing    extension UIView        func addShadow offset  CGSize  color  UIColor  radius  CGFloat  opacity  Float            layer masksToBounds   false         layer shadowOffset   offset         layer shadowColor   color cgColor         layer shadowRadius   radius         layer shadowOpacity   opacity          let backgroundCGColor   backgroundColor  cgColor         backgroundColor   nil         layer backgroundColor    backgroundCGColor           Note that you should set up your view with corner radius and other properties before calling addShadow   After that  just call this from viewDidLoad like this   button addShadow offset  CGSize init width  0  height  3   color  UIColor black  radius  2 0  opacity  0 35    Final result     Super easy and simple

User · Answer

Old thread still current     I ve edited Daniel Gindi s method to make it possible to use it with buttons etc  as well  If anyone needs rounded corners or wants to combine round corners and a border it has to be set on the view s layer which is passed to this method  I ve also set the rasterization to speed it up a little      UIView  putView  UIView  view insideShadowWithColor  CGColorRef color                                   andRadius  CGFloat shadowRadius                                   andOffset  CGSize shadowOffset                                   andOpacity  CGFloat shadowOpacity          Must have same position like  view      UIView  shadow     UIView alloc  initWithFrame view frame         shadow layer contentsScale    UIScreen mainScreen  scale      shadow userInteractionEnabled   YES     Modify this if needed     shadow layer shadowColor   color      shadow layer shadowOffset   shadowOffset      shadow layer shadowRadius   shadowRadius      shadow layer masksToBounds   NO      shadow clipsToBounds   NO      shadow layer shadowOpacity   shadowOpacity      shadow layer rasterizationScale    UIScreen mainScreen  scale      shadow layer shouldRasterize   YES        view superview insertSubview shadow belowSubview view        shadow addSubview view           Move view to the top left corner inside the shadowview         --- gt  Buttons etc are working again        view frame   CGRectMake 0  0  view frame size width  view frame size height        return shadow

User · Answer

Swift 3  amp  IBInspectable solution  Inspired by Ade s solution  First  create an UIView extension          UIView-Extension swift       import Foundation import UIKit   IBDesignable extension UIView           Shadow       IBInspectable var shadow  Bool             get                  return layer shadowOpacity  gt  0 0                       set                  if newValue    true                       self addShadow                                             fileprivate func addShadow shadowColor  CGColor   UIColor black cgColor  shadowOffset  CGSize   CGSize width  3 0  height  3 0   shadowOpacity  Float   0 35  shadowRadius  CGFloat   5 0              let layer   self layer           layer masksToBounds   false            layer shadowColor   shadowColor           layer shadowOffset   shadowOffset           layer shadowRadius   shadowRadius           layer shadowOpacity   shadowOpacity           layer shadowPath   UIBezierPath roundedRect  layer bounds  cornerRadius  layer cornerRadius  cgPath            let backgroundColor   self backgroundColor  cgColor           self backgroundColor   nil           layer backgroundColor    backgroundColor                  Corner radius       IBInspectable var circle  Bool             get                  return layer cornerRadius    self bounds width 0 5                       set                  if newValue    true                       self cornerRadius   self bounds width 0 5                                            IBInspectable var cornerRadius  CGFloat             get                  return self layer cornerRadius                        set                  self layer cornerRadius   newValue                              Borders         Border width       IBInspectable      public var borderWidth  CGFloat             set                  layer borderWidth   newValue                        get                  return layer borderWidth                             Border color       IBInspectable      public var borderColor  UIColor              set                  layer borderColor   newValue  cgColor                        get                  if let borderColor   layer borderColor                       return UIColor cgColor  borderColor                                  return nil                        Then  simply select your UIView in interface builder setting shadow ON and corner radius  like below       The result

User · Answer

Well if you don t want to change your nibs and view hierarchy as suggested David C  this method will do it for you  To add rounded corners and shadow to your UIImageView just use this method  for example    Utils roundCornersForImageView myImageView withCornerRadius 6 0  andShadowOffset 2 0         For performance reasons I don t think it is a good idea to use this code in something like UITableView  since this code changes view hierarchy  So I will suggest to change your nib and add a container view for shadow effect and use Davic C  code      void roundCornersForImageView  UIImageView   imageView  withCornerRadius  float cornerRadius andShadowOffset  float shadowOffset       const float CORNER RADIUS   cornerRadius      const float BORDER WIDTH   1 0       const float SHADOW OFFSET   shadowOffset      const float SHADOW OPACITY   0 8      const float SHADOW RADIUS   3 0         Our old image now is just background image view with shadow     UIImageView  backgroundImageView   imageView      UIView  superView   backgroundImageView superview         Make wider actual visible rect taking into account shadow       offset     CGRect oldBackgroundFrame   backgroundImageView frame      CGRect newBackgroundFrame   CGRectMake oldBackgroundFrame origin x  oldBackgroundFrame origin y  oldBackgroundFrame size width   SHADOW OFFSET  oldBackgroundFrame size height   SHADOW OFFSET        backgroundImageView removeFromSuperview       backgroundImageView frame   newBackgroundFrame                 Make new UIImageView with rounded corners and put our old image     CGRect frameForRoundedImageView   CGRectMake 0  0  oldBackgroundFrame size width  oldBackgroundFrame size height       UIImageView  roundedImageView     UIImageView alloc initWithFrame frameForRoundedImageView       roundedImageView image   imageView image       roundedImageView layer setCornerRadius CORNER RADIUS        roundedImageView layer setBorderColor  UIColor lightGrayColor  CGColor                roundedImageView layer setBorderWidth BORDER WIDTH         roundedImageView layer setMasksToBounds YES          Set shadow preferences      backgroundImageView setImage nil        backgroundImageView layer setShadowColor  UIColor blackColor  CGColor        backgroundImageView layer setShadowOpacity SHADOW OPACITY        backgroundImageView layer setShadowRadius SHADOW RADIUS        backgroundImageView layer setShadowOffset CGSizeMake SHADOW OFFSET  SHADOW OFFSET              Add out two image views back to the view hierarchy       backgroundImageView addSubview roundedImageView        superView addSubview backgroundImageView

User · Answer

This worked for me   Trick was to move the background color from the main view to the layer   CALayer  layer   view layer  layer cornerRadius   15 0f  layer masksToBounds   NO   layer shadowOffset   CGSizeMake 0  3   layer shadowColor     UIColor blackColor  CGColor   layer shadowRadius   2 0f  layer shadowOpacity   0 35f  layer shadowPath     UIBezierPath bezierPathWithRoundedRect layer bounds cornerRadius layer cornerRadius  CGPath    CGColorRef  bColor   view backgroundColor CGColor  view backgroundColor   nil  layer backgroundColor    bColor

User · Answer

var shadows   UIView   shadows frame   view frame shadows clipsToBounds   false view addSubview shadows    let shadowPath0   UIBezierPath roundedRect  shadows bounds  cornerRadius  10  let layer0   CALayer   layer0 shadowPath   shadowPath0 cgPath layer0 shadowColor   UIColor red  0  green  0  blue  0  alpha  0 23  cgColor layer0 shadowOpacity   1 layer0 shadowRadius   6 layer0 shadowOffset   CGSize width  0  height  3  layer0 bounds   shadows bounds layer0 position   shadows center  shadows layer addSublayer layer0

User · Answer

I make some changes to the code of daniel gindi  This is all you need to make it work      void putView  UIView  view insideShadowWithColor  UIColor  color andBlur           CGFloat blur andOffset  CGSize shadowOffset andOpacity  CGFloat shadowOpacity       CGRect shadowFrame   view frame      UIView   shadow     UIView alloc  initWithFrame shadowFrame       shadow backgroundColor    UIColor redColor       shadow userInteractionEnabled   YES     Modify this if needed     shadow layer shadowColor   color CGColor      shadow layer shadowOffset   shadowOffset      shadow layer shadowRadius   blur      shadow layer cornerRadius   view layer cornerRadius      shadow layer masksToBounds   NO      shadow clipsToBounds   NO      shadow layer shadowOpacity   shadowOpacity       view superview insertSubview shadow belowSubview view

User · Answer

daniel gindi s answer above did the trick for me    1 daniel  However  I had to make minor adjustments - change the shadowFrame size to be same as view s frame size  and enable user interaction  Here s the updated code      UIView  putView  UIView  view insideShadowWithColor  UIColor  color andRadius  CGFloat shadowRadius andOffset  CGSize shadowOffset andOpacity  CGFloat shadowOpacity       CGRect shadowFrame     Modify this if needed         Modified this line     shadowFrame size   CGSizeMake view frame size width  view frame size height        shadowFrame origin x   0 f      shadowFrame origin y   0 f      UIView   shadow     UIView alloc  initWithFrame shadowFrame           Modified this line     shadow userInteractionEnabled   YES      shadow layer shadowColor   color CGColor      shadow layer shadowOffset   shadowOffset      shadow layer shadowRadius   shadowRadius      shadow layer masksToBounds   NO      shadow clipsToBounds   NO      shadow layer shadowOpacity   shadowOpacity        shadow addSubview view       return shadow      I would like to add that in my case  I was trying to add this to a 3rd party view controller  i e  I did not have direct control over the code  So  here s how I used the function above   UIView  shadow    self putView vc view           insideShadowWithColor  UIColor blackColor                       andRadius 5 0                       andOffset CGSizeMake 0 0  0 0                       andOpacity 1 0   vc view   shadow  vc view layer cornerRadius   5 0  vc view layer masksToBounds   YES

User · Answer

Swift 4   Create Subclass of UIView  class ShadowView  UIView        required init  coder aDecoder  NSCoder            super init coder  aDecoder              corner radius         self layer cornerRadius   10             border         self layer borderWidth   1 0         self layer borderColor   UIColor black cgColor             shadow         self layer shadowColor   UIColor black cgColor         self layer shadowOffset   CGSize width  3  height  3          self layer shadowOpacity   0 7         self layer shadowRadius   4 0            Using

User · Answer

Swift 4 Solution for making UICollectionViewCell round and adding Shadows   without any extensions and complications     Note  For simple views e g Buttons  See the  suragch s Answer in this post   https   stackoverflow com a 34984063 7698092  Tested successfully for buttons  In case if any one still struggling to round the corners and add shadows at the same time  Although this solution works with UICollectionViewCell  it can be generalized to any view   This technique worked for me without making any extensions and all the complicated stuff  I am working with storyBoard    Technique  You must add a UIView  lets say it  containerView   inside your UICollectionViewCell in storyBoard and add all the required views  buttons  images etc  inside this containerView   See the Screenshot     Connect the outlet for containerView  Add following lines of code in CellforItemAtIndexPath delegate function     adds shadow to the layer of cell  cell layer cornerRadius   3 0     cell layer masksToBounds   false     cell layer shadowColor   UIColor black cgColor     cell layer shadowOffset   CGSize width  0  height  0      cell layer shadowOpacity   0 6    makes the cell round   let containerView   cell containerView      containerView layer cornerRadius   8     containerView clipsToBounds   true   Output  See the simulator Screenshot

User · Answer

I write this UIView category method to solve this problem  uses separate views for the shadow and the corner radius   - UIView   shadowedWrapViewWithBounds  CGRect bounds   UIView  baseView     UIView alloc  init   baseView bounds   bounds  baseView backgroundColor    UIColor clearColor   baseView layer shadowColor    UIColor blackColor  CGColor  baseView layer shadowOffset   CGSizeMake 0  0   baseView layer shadowOpacity   0 7  baseView layer shadowRadius   4 0      improve performance baseView layer shadowPath    UIBezierPath bezierPathWithRoundedRect baseView bounds cornerRadius 4  CGPath  baseView layer shouldRasterize   YES  baseView layer rasterizationScale    UIScreen mainScreen  scale    baseView addSubview self     use Masonry autolayout  self can set corner radius  self makeConstraints   MASConstraintMaker  make        make edges equalTo baseView        return baseView

User · Answer

import UIKit  extension UIView        func addShadow shadowColor  UIColor  offSet  CGSize  opacity  Float  shadowRadius  CGFloat  cornerRadius  CGFloat  corners  UIRectCorner  fillColor  UIColor    white             let shadowLayer   CAShapeLayer           let size   CGSize width  cornerRadius  height  cornerRadius          let cgPath   UIBezierPath roundedRect  self bounds  byRoundingCorners  corners  cornerRadii  size  cgPath   1         shadowLayer path   cgPath   2         shadowLayer fillColor   fillColor cgColor   3         shadowLayer shadowColor   shadowColor cgColor   4         shadowLayer shadowPath   cgPath         shadowLayer shadowOffset   offSet   5         shadowLayer shadowOpacity   opacity         shadowLayer shadowRadius   shadowRadius         self layer addSublayer shadowLayer

User · Answer

Swift       corner radius blueView layer cornerRadius   10     border blueView layer borderWidth   1 0 blueView layer borderColor   UIColor black cgColor     shadow blueView layer shadowColor   UIColor black cgColor blueView layer shadowOffset   CGSize width  3  height  3  blueView layer shadowOpacity   0 7 blueView layer shadowRadius   4 0   Exploring the options            Problem 1  Shadow gets clipped off  What if there are sublayers or subviews  like an image  whose content we want to clip to the bounds of our view     We can accomplish this with   blueView layer masksToBounds   true    Alternatively  blueView clipsToBounds   true gives the same result      But  oh no  The shadow was also clipped off because it s outside of the bounds  What to do  What to do   Solution  Use separate views for the shadow and the border  The base view is transparent and has the shadow  The border view clips any other subcontent that it has to its borders      add the shadow to the base view baseView backgroundColor   UIColor clear baseView layer shadowColor   UIColor black cgColor baseView layer shadowOffset   CGSize width  3  height  3  baseView layer shadowOpacity   0 7 baseView layer shadowRadius   4 0     add the border to subview let borderView   UIView   borderView frame   baseView bounds borderView layer cornerRadius   10 borderView layer borderColor   UIColor black cgColor borderView layer borderWidth   1 0 borderView layer masksToBounds   true baseView addSubview borderView      add any other subcontent that you want clipped let otherSubContent   UIImageView   otherSubContent image   UIImage named   lion   otherSubContent frame   borderView bounds borderView addSubview otherSubContent    This gives the following result     Problem 2  Poor performance  Adding rounded corners and shadows can be a performance hit  You can improve performance by using a predefined path for the shadow and also specifying that it be rasterized  The following code can be added to the example above   baseView layer shadowPath   UIBezierPath roundedRect  baseView bounds  cornerRadius  10  cgPath baseView layer shouldRasterize   true baseView layer rasterizationScale   UIScreen main scale   See this post for more details  See here and here also   This answer was tested with Swift 4 and Xcode 9

User · Answer

Shadow   Border   Corner Radius       scrollview backgroundColor    UIColor whiteColor        CALayer  ScrlViewLayer    scrollview layer        ScrlViewLayer setMasksToBounds NO         ScrlViewLayer setShadowColor   UIColor lightGrayColor  CGColor         ScrlViewLayer setShadowOpacity 1 0         ScrlViewLayer setShadowRadius 6 0         ScrlViewLayer setShadowOffset CGSizeMake  0   0          ScrlViewLayer setShouldRasterize YES        ScrlViewLayer setCornerRadius 5 0        ScrlViewLayer setBorderColor  UIColor lightGrayColor  CGColor        ScrlViewLayer setBorderWidth 1 0        ScrlViewLayer setShadowPath  UIBezierPath bezierPathWithRect scrollview bounds  CGPath

User · Answer

You need add masksToBounds   true for combined between corderRadius shadowRadius   button layer masksToBounds   false

User · Answer

If you are struggling because of the rounded corners vs  subviews vs  masksToBounds  then try using my function   -  UIView  putView  UIView  view insideShadowWithColor  UIColor  color andRadius  CGFloat shadowRadius andOffset  CGSize shadowOffset andOpacity  CGFloat shadowOpacity       CGRect shadowFrame     Modify this if needed     shadowFrame size width   0 f      shadowFrame size height   0 f      shadowFrame origin x   0 f      shadowFrame origin y   0 f      UIView   shadow     UIView alloc  initWithFrame shadowFrame       shadow userInteractionEnabled   NO     Modify this if needed     shadow layer shadowColor   color CGColor      shadow layer shadowOffset   shadowOffset      shadow layer shadowRadius   shadowRadius      shadow layer masksToBounds   NO      shadow clipsToBounds   NO      shadow layer shadowOpacity   shadowOpacity       view superview insertSubview shadow belowSubview view        shadow addSubview view       return shadow      call it on your view  whether your view has rounded corners  no matter its size  its shape - a nice shadow will be drawn   Just keep the return value of the function so you can refer to it when you want to remove the table  or for example use insertSubview aboveView

User · Answer

Something swifty tested in swift 4  import UIKit  extension UIView        IBInspectable var dropShadow  Bool           set              if newValue                   layer shadowColor   UIColor black cgColor                 layer shadowOpacity   0 4                 layer shadowRadius   1                 layer shadowOffset   CGSize zero               else                   layer shadowColor   UIColor clear cgColor                 layer shadowOpacity   0                 layer shadowRadius   0                 layer shadowOffset   CGSize zero                                 get               return layer shadowOpacity  gt  0                     Produces    If you enable it in the Inspector like this     It will add the User Defined Runtime Attribute  resulting in      I added previously the cornerRadius   8

User · Answer

You need to use use shadowView and roundView    shadowView   Must has background color Should lay behind roundView The trick is to layout shadowView a bit inside  and its shadow needs to glow out  Adjust the insets so that shadowView is completely invisible behind roundView   roundView   Must clips subviews   The code  addSubviews shadowView  roundView  roundView addSubviews titleLabel  subtitleLabel  imageView      need inset shadowView pinEdges view  self  inset  UIEdgeInsets constraintInsets  2   roundView pinEdges view  self   do     shadowView backgroundColor    white    need background   let layer   shadowView layer   layer shadowColor   UIColor black cgColor   layer shadowRadius   3   layer shadowOffset   CGSize width  3  height  3    layer shadowOpacity   0 7   layer shouldRasterize   true    do     roundView backgroundColor    white   let layer   roundView layer   layer masksToBounds   true   layer cornerRadius   5     Or you can just do below without specifying clipToBounds maskToBounds  layer shadowColor   UIColor gray cgColor layer shadowOffset   CGSize width  3  height  3  layer shadowOpacity   0 8

User · Answer

Here is my version in Swift 3 for a UIView  let corners UIRectCorner     bottomLeft   topRight  let path   UIBezierPath roundedRect  rect  byRoundingCorners  corners  cornerRadii  CGSize width  radius  height  radius   let mask   CAShapeLayer    mask path   path cgPath mask fillColor   UIColor white cgColor  let shadowLayer   CAShapeLayer   shadowLayer shadowColor   UIColor black cgColor shadowLayer shadowOffset   CGSize width  0 0  height  4 0  shadowLayer shadowRadius   6 0 shadowLayer shadowOpacity   0 25 shadowLayer shadowPath   mask path  self layer insertSublayer shadowLayer  at  0  self layer insertSublayer mask  at  1

User · Answer

You need to use two UIViews to achieve this  One UIView will work like shadow and other one will work for rounded border   Here is a code snippet a Class Method with a help of a protocol    implementation UIMethods     UIView   genComposeButton  UIViewController  lt UIComposeButtonDelegate gt    observer        UIView  shadow     UIView alloc init       shadow layer cornerRadius   5 0      shadow layer shadowColor     UIColor blackColor  CGColor       shadow layer shadowOpacity   1 0      shadow layer shadowRadius   10 0      shadow layer shadowOffset   CGSizeMake 0 0f  -0 5f        UIButton  btnCompose     UIButton alloc initWithFrame CGRectMake 0  0 60  60         btnCompose setUserInteractionEnabled YES       btnCompose layer cornerRadius   30      btnCompose layer masksToBounds   YES       btnCompose setImage  UIImage imageNamed   60x60   forState UIControlStateNormal        btnCompose addTarget observer action  selector btnCompose click   forControlEvents UIControlEventTouchUpInside        shadow addSubview btnCompose       return shadow      In the code above btnCompose click  will become a  required delegate method which will fire on the button click   And here I added a button to my UIViewController like this   UIView  btnCompose    UIMethods genComposeButton self   btnCompose frame   CGRectMake self view frame size width - 75                            self view frame size height - 75                            60  60    self view addSubview btnCompose     The result will look like this

User · Answer

The following code snippet adds a border  border radius  and drop shadow to v  a UIView      border radius  v layer setCornerRadius 30 0f       border  v layer setBorderColor  UIColor lightGrayColor  CGColor    v layer setBorderWidth 1 5f       drop shadow  v layer setShadowColor  UIColor blackColor  CGColor    v layer setShadowOpacity 0 8    v layer setShadowRadius 3 0    v layer setShadowOffset CGSizeMake 2 0  2 0      You can adjust the settings to suit your needs   Also  add the QuartzCore framework to your project and    import  lt QuartzCore QuartzCore h gt    See my other answer regarding masksToBounds     Note  This may not work in all cases  If you find that this method interferes with other drawing operations that you are performing  please see this answer

User · Answer

Here is the solution for masksToBounds conflict problem  it works for me   After you set the corderRadius borderColor shadow and so on  set  masksToBounds as NO   v layer masksToBounds   NO

User · Answer

I have tried so many solutions from this post and ended up with the below solution  This is full proof solution unless you need to drop shadow on a clear color view   -  void addShadowWithRadius  CGFloat shadowRadius withOpacity  CGFloat shadowOpacity withOffset  CGSize shadowOffset withColor  UIColor   shadowColor withCornerradius  CGFloat cornerRadius       UIView  viewShadow     UIView alloc initWithFrame self frame       viewShadow backgroundColor    UIColor whiteColor       viewShadow layer shadowColor   shadowColor CGColor      viewShadow layer shadowOffset   shadowOffset      viewShadow layer shadowRadius   shadowRadius      viewShadow layer shadowOpacity   shadowOpacity      viewShadow layer cornerRadius   cornerRadius      viewShadow layer masksToBounds   NO       self superview insertSubview viewShadow belowSubview self         viewShadow setTranslatesAutoresizingMaskIntoConstraints NO        self superview addConstraint  NSLayoutConstraint constraintWithItem viewShadow attribute NSLayoutAttributeWidth relatedBy NSLayoutRelationEqual toItem self attribute NSLayoutAttributeWidth multiplier 1 0 constant 0         self superview addConstraint  NSLayoutConstraint constraintWithItem viewShadow attribute NSLayoutAttributeHeight relatedBy NSLayoutRelationEqual toItem self attribute NSLayoutAttributeHeight multiplier 1 0 constant 0         self superview addConstraint  NSLayoutConstraint constraintWithItem viewShadow attribute NSLayoutAttributeCenterX relatedBy NSLayoutRelationEqual toItem viewShadow attribute NSLayoutAttributeCenterX multiplier 1 0 constant 0         self superview addConstraint  NSLayoutConstraint constraintWithItem viewShadow attribute NSLayoutAttributeCenterY relatedBy NSLayoutRelationEqual toItem viewShadow attribute NSLayoutAttributeCenterY multiplier 1 0 constant 0         self layoutIfNeeded        self layer cornerRadius   cornerRadius      self layer masksToBounds   YES

User · Answer

This is how you do it  with rounded corners and rounded shadows without bothering with paths     Inner view with content  imageView layer setBorderColor   UIColor lightGrayColor  CGColor     imageView layer setBorderWidth 1 0f    imageView layer setCornerRadius 8 0f    imageView layer setMasksToBounds YES      Outer view with shadow UIView  shadowContainer     UIView alloc  initWithFrame imageView frame    shadowContainer layer setMasksToBounds NO    shadowContainer layer setShadowColor   UIColor blackColor  CGColor     shadowContainer layer setShadowOpacity 0 6f    shadowContainer layer setShadowRadius 2 0f    shadowContainer layer setShadowOffset  CGSizeMake 0 0f  2 0f      shadowContainer addSubview imageView     The view with content  in my case a UIImageView  has a corner radius and therefore has to mask to bounds   We create another equally sized view for the shadows  set it s maskToBounds to NO and then add the content view to the container view  e g  shadowContainer

User · Answer

One way to do this is to put the view with rounded corners in a view with the drop shadow   UIView  roundedView     UIView alloc  initWithFrame  frame   roundedView layer cornerRadius   5 0  roundedView layer masksToBounds   YES   UIView  shadowView     UIView alloc  initWithFrame  frame   shadowView layer shadowColor    UIColor blackColor  CGColor  shadowView layer shadowRadius   5 0  shadowView layer shadowOffset   CGSizeMake 3 0  3 0   shadowView layer shadowOpacity   1 0   shadowView addSubview  roundedView     Then you can add the shadowView wherever you want

User · Answer

Here is the solution that will work for sure   I have created UIView extension with required edges to apply shadow on as below   enum AIEdge Int       case     Top      Left      Bottom      Right      Top Left      Top Right      Bottom Left      Bottom Right      All      None    extension UIView        func applyShadowWithCornerRadius color UIColor  opacity Float  radius  CGFloat  edge AIEdge  shadowSpace CGFloat                var sizeOffset CGSize   CGSize zero          switch edge           case  Top              sizeOffset   CGSize width  0  height  -shadowSpace          case  Left              sizeOffset   CGSize width  -shadowSpace  height  0          case  Bottom              sizeOffset   CGSize width  0  height  shadowSpace          case  Right              sizeOffset   CGSize width  shadowSpace  height  0            case  Top Left              sizeOffset   CGSize width  -shadowSpace  height  -shadowSpace          case  Top Right              sizeOffset   CGSize width  shadowSpace  height  -shadowSpace          case  Bottom Left              sizeOffset   CGSize width  -shadowSpace  height  shadowSpace          case  Bottom Right              sizeOffset   CGSize width  shadowSpace  height  shadowSpace            case  All              sizeOffset   CGSize width  0  height  0          case  None              sizeOffset   CGSize zero                    self layer cornerRadius   self frame size height   2         self layer masksToBounds   true           self layer shadowColor   color cgColor         self layer shadowOpacity   opacity         self layer shadowOffset   sizeOffset         self layer shadowRadius   radius         self layer masksToBounds   false          self layer shadowPath   UIBezierPath roundedRect self bounds  cornerRadius self layer cornerRadius  cgPath           Finally  you can call the shadow function as below for any of your UIView subclass  you can also specify the edge to apply shadow on  try different variations as per your need changing parameters of below method call   viewRoundedToBeShadowedAsWell applyShadowWithCornerRadius color   gray  opacity  1  radius  15  edge  AIEdge All  shadowSpace  15     Result image

User · Answer

After one whole day research of the round corner view with shadow  I m glad to post my custom uiview class here  hope to end this question   RoundCornerShadowView h   import  lt UIKit UIKit h gt    interface RoundCornerShadowView   UIView   end   RoundCornerShadowView m   import  RoundCornerShadowView h    implementation RoundCornerShadowView         must override this method  not the other method        otherwise  the background corner doesn t disappear         2015 05 29 - void  layoutSubviews        super layoutSubviews    is must to ensure rightly layout children view        1  first  create Inner layer with content     CALayer  innerView    CALayer layer       innerView frame   CGRectMake 0 0 self bounds size width self bounds size height         instead of  innerView frame   self frame      innerView borderWidth   1 0f      innerView cornerRadius   6 0f      innerView masksToBounds   YES      innerView borderColor     UIColor lightGrayColor  CGColor       innerView backgroundColor     UIColor whiteColor  CGColor         put the layer to the BOTTOM of layers is also a MUST step          otherwise this layer will overlay the sub uiviews in current uiview         self layer insertSublayer innerView atIndex 0          2  then  create shadow with self layer     self layer masksToBounds   NO      self layer shadowColor     UIColor darkGrayColor  CGColor       self layer shadowOpacity   0 4f        shadow length     self layer shadowRadius   2 0f        no offset     self layer shadowOffset   CGSizeMake 0  0         right down shadow        self layer setShadowOffset  CGSizeMake 1 0f  1 0f           3  last but important  MUST clear current view background color  or the color will show in the corner      self backgroundColor    UIColor clearColor       end   so  NO need to add subview in view or below in target view  just add one layer in current view  and do 3 step to complete it   take a close look at to the comments in the code  it s helpful to understanding the component

User · Answer

I solved the problem using the following trick when assigning shadow path for the container view     UIBezierPath bezierPathWithRoundedRect cell bounds cornerRadius 12    Notice that the path given to the shadow is a rounded rectangle with the same corner radius as the background that the cell contains     this is the border for the UIView that is added to a cell cell backgroundView layer cornerRadius   12  cell backgroundView layer masksToBounds   YES  cell backgroundView layer borderColor    UIColor darkGrayColor  CGColor  cell backgroundView layer borderWidth   1     this is the shadow around the cell itself  cannot have round corners with borders and shadow  need to use two views cell layer shadowRadius   2  cell layer cornerRadius   12  cell layer masksToBounds   NO    cell layer  setShadowColor   UIColor darkGrayColor  CGColor       cell layer  setShadowOffset CGSizeMake 0 0 0 0      cell layer  setShadowOpacity 1 0    UIBezierPath  path    UIBezierPath bezierPathWithRoundedRect cell bounds cornerRadius 12     cell layer  setShadowPath  path CGPath

User · Answer

Using Swift 4 and Xcode 9  this is a working example of rounding an ImageView with a drop shadow  and a border         set dimensions and position of image  in this case  centered      let imageHeight  CGFloat   150  imageWidth  CGFloat   150     let xPosition    self view frame width   2  -  imageWidth   2      let yPosition    self view frame height   2  -  imageHeight   2         set desired corner radius     let cornerRadius  CGFloat   20        create container for the image     let imageContainer   UIView frame  CGRect x  xPosition  y  yPosition  width  imageWidth  height  imageHeight          configure the container     imageContainer clipsToBounds   false     imageContainer layer shadowColor   UIColor black cgColor     imageContainer layer shadowOpacity   1     imageContainer layer shadowOffset   CGSize width  3 0  height  3 0      imageContainer layer shadowRadius   5     imageContainer layer shadowPath   UIBezierPath roundedRect  imageContainer bounds  cornerRadius  cornerRadius  cgPath        create imageView     let imageView   UIImageView frame  imageContainer bounds         configure the imageView     imageView clipsToBounds   true     imageView layer cornerRadius   cornerRadius       add a border  if required      imageView layer borderColor   UIColor black cgColor     imageView layer borderWidth   1 0       set the image     imageView image   UIImage named   bird          add the views to the superview     view addSubview imageContainer      imageContainer addSubview imageView      If you want the image to be circular   and shown without border   let cornerRadius   imageWidth   2

User · Answer

extension UIView       func dropRoundedShadowForAllSides             let backgroundView   UIView frame self frame          let radius   frame height 2         backgroundView layer masksToBounds   false         self layer masksToBounds   true         backgroundView layer shadowOffset   CGSize width  0 0  height  0 0          backgroundView layer shadowRadius   4         backgroundView layer shadowOpacity   0 4          let path   UIBezierPath               Start at the Top Left Corner   radius distance         path move to  CGPoint x  2 radius  y  0 0               Move to the Top Right Corner - radius distance         path addLine to  CGPoint x  backgroundView frame size width - radius  y  0 0               Move to top right corner   radius down as curve         let centerPoint1   CGPoint x backgroundView frame size width - radius y radius          path addArc withCenter  centerPoint1  radius  radius  startAngle  3   pi 2   endAngle  0  clockwise  true              Move to the Bottom Right Corner - radius         path addLine to  CGPoint x  backgroundView frame size width  y  backgroundView frame size height - radius               Move to top right corner   radius left as curve         let centerPoint2   CGPoint x backgroundView frame size width - radius y backgroundView frame size height - radius          path addArc withCenter  centerPoint2  radius  radius  startAngle  0  endAngle   pi 2  clockwise  true              Move to the Bottom Left Corner - radius         path addLine to  CGPoint x  radius  y  backgroundView frame size height               Move to left right corner - radius up as curve         let centerPoint3   CGPoint x radius y backgroundView frame size height - radius          path addArc withCenter  centerPoint3  radius  radius  startAngle   pi 2  endAngle   pi  clockwise  true              Move to the top Left Corner - radius         path addLine to  CGPoint x  0  y  radius               Move to top right corner   radius down as curve         let centerPoint4   CGPoint x radius y radius          path addArc withCenter  centerPoint4  radius  radius  startAngle   pi  endAngle  3     pi 2   clockwise  true           path close            backgroundView layer shadowPath   path cgPath         if let superView   self superview               superView addSubview backgroundView              superView sendSubview toBack  backgroundView              superView bringSubview toFront  self

User · Answer

The answer provided by Evan Mulawski will work perfectly  The catch is that you have to set the background color for the view to clearColor and the masksToBounds property to NO   You can set whatever color you want for the view  set it like   v layer backgroundColor   your color    Hope this helps

User · Answer

The following worked best for me   this code lies in UIView extension  so self denotes some UIView to which we must add a shadow and round corner   -  void addShadowViewWithCornerRadius  CGFloat radius    UIView  container   self superview   if   container        return     UIView  shadowView     UIView alloc  init   shadowView translatesAutoresizingMaskIntoConstraints   NO  shadowView backgroundColor    UIColor lightGrayColor   shadowView layer cornerRadius   radius  shadowView layer masksToBounds   YES    container addSubview shadowView    container bringSubviewToFront shadowView     container addConstraint  NSLayoutConstraint constraintWithItem shadowView                                                       attribute NSLayoutAttributeWidth                                                       relatedBy NSLayoutRelationEqual                                                          toItem self                                                       attribute NSLayoutAttributeWidth                                                      multiplier 1 0                                                        constant 0 0     container addConstraint  NSLayoutConstraint constraintWithItem shadowView                                                       attribute NSLayoutAttributeLeading                                                       relatedBy NSLayoutRelationEqual                                                          toItem self                                                       attribute NSLayoutAttributeLeading                                                      multiplier 1 0                                                        constant 2 0      container addConstraint  NSLayoutConstraint constraintWithItem shadowView                                                       attribute NSLayoutAttributeHeight                                                       relatedBy NSLayoutRelationEqual                                                          toItem self                                                       attribute NSLayoutAttributeHeight                                                      multiplier 1 0                                                        constant 0 0     container addConstraint  NSLayoutConstraint constraintWithItem shadowView                                                       attribute NSLayoutAttributeTop                                                       relatedBy NSLayoutRelationEqual                                                          toItem self                                                       attribute NSLayoutAttributeTop                                                      multiplier 1 0                                                        constant 2 0     container sendSubviewToBack shadowView       The main difference between this and other code samples is that this adds the shadow view as a sibling view  as against adding the current view as subview of shadow view   thereby eliminating the need to modify the existing view hierarchy in any way

[ios] UIView with rounded corners and drop shadow?

Examples related to ios

Examples related to cocoa-touch

Examples related to uiview

Examples related to calayer

Examples related to rounded-corners